มาดูกันว่าปัญหาจะเกิดขึ้นเมื่อการลากครั้งก่อนมีอะไรบ้างเมื่อมีอะไรอยู่รอบตัว? จะไม่มีปัญหาในเบราว์เซอร์ขั้นสูง ลองทดสอบใน IE7 และปัญหาจะออกมา ดังที่แสดง
เราสามารถเห็นได้อย่างชัดเจนว่ามีการเลือกข้อความแล้ว จากนั้นประสบการณ์ของผู้ใช้นี้ก็แย่มากและใช้งานไม่ได้ โดยวิธีการที่เราเพิ่มการส่งคืนที่ผิดพลาดมาก่อน; ช่วยเราแก้ปัญหามากมาย หากเราลบสิ่งนี้ปัญหาเดียวกันจะเกิดขึ้นในโครเมี่ยม นั่นคือการพูดว่าการกลับมาเป็นเท็จ สามารถแก้ปัญหาของเบราว์เซอร์ Chrome FF IE9+ ได้
ในความเป็นจริงในการพัฒนาของเรามีองค์ประกอบมากมายในหน้าและเป็นไปไม่ได้ที่จะมีเพียงหนึ่ง div สถานที่อื่น ๆ จะไม่ถูกเลือกเมื่อคุณลากเช่นแผนที่ Baidu คุณสามารถเล่นได้
แล้วเราจะลากได้อย่างไร? มันสามารถแก้ปัญหา IE7 ได้หรือไม่?
สารละลาย:
เราสามารถใช้เคล็ดลับเล็ก ๆ เพื่อแก้ปัญหาได้ เคล็ดลับนี้สามารถรองรับได้ใน IE6-8 เท่านั้นและสามารถแก้ปัญหาของเราได้จริงเพราะเบราว์เซอร์อื่นใช้ return false; มาดูกันว่าเทคนิคคืออะไร
มันเป็นเหตุการณ์ที่เกิดขึ้น! - แนบรหัสกับคำอธิบายสั้น ๆ
<title> </title> <script type = "text/javascript"> window.onload = function () {var obtn = document.getElementById ("btn"); obtn.onclick = function () {แจ้งเตือน (1); - // เหตุการณ์ในทุกสถานที่บนหน้าเว็บมีความเข้มข้นบนปุ่มเช่น Obtn.setCapture (); // เมื่อใดก็ตามที่คุณคลิกคุณจะป๊อป A} </script> </head> <body> <input type = "ปุ่ม" id = "btn" value = "ปุ่ม"/> </body>ในความเป็นจริงเหตุการณ์ในทุกสถานที่ในหน้าจะเข้มข้น ณ จุดหนึ่งและปรากฏขึ้นเมื่อคลิกที่ตำแหน่งใด ๆ ของหน้าซึ่งเป็นฟังก์ชันของ setCapture ()
รวบรวมกิจกรรมทั้งหมดเป็นปุ่มเดียวเพื่อจัดการ! - นี่เข้ากันได้กับ IE เท่านั้น! -
ด้วยวิธีนี้ให้ฉันดูวิธีแก้ไขรหัสก่อนหน้า - - -
ก่อนอื่นเราเปลี่ยนเอกสารทั้งหมดกลับไปที่ Div คุณจำได้ไหมว่าเราเคยพูดมาก่อนหน้านี้เพราะเมาส์ลากเร็วขึ้นมันง่ายที่จะลาก Div ออกมาดังนั้นเราจึงเพิ่มเหตุการณ์ทั้งหมดลงในเอกสาร
และตอนนี้ไม่จำเป็นต้องทำเช่นนี้เพิ่ม setCapture () ลงใน div ก่อนหน้าของเราเพื่อดูผล
<body> ข้อความใน IE 7 จะถูกเลือก <br /> หากคุณไม่เพิ่ม return false chrome ff จะมีปัญหาดังกล่าว asdsadad <br /> <div id = "div1"> asdsadad asdsadad asdsadad </div> asdsadadadasdsdsadad </body>
<style type = "text/css"> #div1 {width: 200px; ความสูง: 200px; ความเป็นมา: สีแดง; ตำแหน่ง: สัมบูรณ์; } </style> <script type = "text/javascript"> // drag และวาง div ที่ว่างเปล่า Firefox รุ่นต่ำมี bug window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || เหตุการณ์; var odivleft = oeVent.Clientx - disx; var odivtop = oEvent.Clienty - disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; - odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; - odiv.setCapture (); กลับเท็จ; // บล็อกเหตุการณ์เริ่มต้นและแก้ไขข้อผิดพลาด Firefox}; - </script>ในเวลานี้เราไม่มีปัญหาในการลาก Div เมื่อเราลากมันอย่างรวดเร็ว ในความเป็นจริงหลังจากเพิ่ม setCapture () เหตุการณ์ทั้งหมดในหน้าเว็บทั้งหมดจะถูกรวบรวมใน div นี้
ในความเป็นจริงข้อความนี้จะไม่ถูกเลือกในขณะนี้ ทำไม เนื่องจากเหตุการณ์ทั้งหมดในข้อความและรูปภาพอยู่ใน Div พวกเขาจึงไม่สามารถหาเหตุการณ์ได้อีกต่อไป! ดังนั้นโดยธรรมชาติแล้วพวกเขาจะไม่ถูกเลือก
แน่นอนว่ามีปัญหาอื่นตอนนี้? - - - คุณจะพบว่าเมื่อคุณพยายามเลือกคำเหล่านั้นคุณจะไม่ถูกเลือก
ฉันควรทำอย่างไร? เหตุการณ์ทั้งหมดมุ่งเน้นไปที่ Div - - -
ดังนั้นในความเป็นจริง setcapture () นี้เป็นเหมือนการล็อค ตอนนี้มันถูกล็อคและเหตุการณ์ทั้งหมดอยู่ใน div ตอนนี้มันก็โอเคที่จะปลดล็อก อันที่สอดคล้องกันคือ refleasecapture ();
releasecapture (); คือการปล่อยการจับภาพ ในความเป็นจริงเพียงเพิ่มเมื่อมีการเลี้ยงเมาส์
window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || เหตุการณ์; var odivleft = oeVent.Clientx - disx; var odivtop = oEvent.Clienty - disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; - odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; odiv.releasecapture (); - odiv.setCapture (); กลับเท็จ; // บล็อกเหตุการณ์เริ่มต้นและแก้ไขข้อผิดพลาด Firefox}; -ตอนนี้เราสามารถแก้ปัญหาการเลือกข้อความได้ ในที่สุดเราก็นั่งลงและเข้ากันได้ ในความเป็นจริง setcapture () นี้ไม่เข้ากันและมันผิดที่จะใส่ไว้ในเบราว์เซอร์อื่น
ง่ายมาก เราเพียงแค่ต้องรวมรหัสจากสิ่งนี้และรหัสสุดท้าย เพียงแค่ทำให้การตัดสินเข้ากันได้ ในที่สุดก็มีการแนบรหัสที่จัดระเบียบ
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; if (odiv.setCapture) {odiv.onmousemove = mousemove; odiv.onmouseup = mouseup; odiv.setCapture (); // เช่น 7 ข้อความต่อไปนี้จะไม่ถูกเลือกจริง ๆ แล้วเป็นข้อความหรือรูปภาพที่ไม่สามารถรับได้} else {document.onmousemove = mousemove; document.onmouseup = mouseup; } ฟังก์ชั่น mousemove (ev) {var oevent = ev || เหตุการณ์; var odivleft = oeVent.Clientx - disx; var odivtop = oEvent.Clienty - disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; } function mouseup (ev) {this.onmousemove = null; this.onmouseup = null; if (odiv.releasecapture) {odiv.releasecapture (); // release capture}} return false; // บล็อกเหตุการณ์เริ่มต้นและแก้ไขข้อผิดพลาด Firefox}; - </script>โอเคทุกอย่างเสร็จแล้ว (∩_∩) โอฮ่าฮ่า ~