دعونا نرى ما هي المشكلات التي ستحدث عندما يكون السحب السابق موجودًا عندما يكون هناك شيء ما حوله؟ لن تكون هناك مشكلة في المتصفحات المتقدمة. دعنا نختبرها في 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 () {Alert (1) ؛ } ؛ // الأحداث في جميع الأماكن على صفحة الويب تتركز على زر ، أي outn.setcapture () مخصص () ؛ // أينما كنت ، يمكنك أن تنبثق a} </script> </head> <body> <input type = "button" id = "btn" value = "button"/> </body>في الواقع ، يتم تركيز الأحداث الموجودة في جميع الأماكن على الصفحة عند نقطة واحدة ، وتظهر من الملوثات العضوية الثابتة عند النقر على أي موضع للصفحة ، وهي وظيفة setCapture ().
جمع جميع الأحداث إلى زر واحد للتعامل معها! ! هذا متوافق فقط مع IE! !
وبهذه الطريقة ، دعني أرى كيفية تعديل الكود السابق. . . .
أولاً ، نقوم بتغيير جميع المستندات إلى Div. هل تتذكر أننا قلنا ذلك من قبل لأن الماوس يسحب بشكل أسرع ، من السهل سحب Div ، لذلك نضيف جميع الأحداث إلى المستند.
والآن ليست هناك حاجة للقيام بذلك ، أضف setCapture () إلى DIV السابق لدينا لترى التأثير.
<body> سيتم اختيار النص في IE 7. <br /> إذا لم تقم بإضافة عودة الكروم FALL FF ، فستكون هناك مشكلة ASDSADAD <BR /> <div id = "div1"> asdsadad asdsadad < /div> asdsadasdsdsadad < /body>
<type type = "text/css"> #div1 {width: 200px ؛ الارتفاع: 200 بكسل ؛ الخلفية: أحمر. الموقف: مطلق ؛ } </style> <script type = "text/javaScript"> // اسحب وإسقاط Div فارغ. الإصدار المنخفض من firefox لديه نافذة bug.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. الآن لا بأس في فتحه. المقابل هو RELEASECAPTURE () ؛
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 () ؛ // IE 7 لن يتم تحديد النص التالي ، فهو في الواقع النص أو الصورة التي لا يمكن الحصول عليها.} آخر {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' ؛ } وظيفة mouseup (ev) {this.onmousemove = null ؛ this.onmouseup = null ؛ if (odiv.releasecapture) {odiv.releasecapture () ؛ // relected apture}} return false ؛ // حظر الحدث الافتراضي وحل علة Firefox} ؛ } ؛ </script>حسنًا ، كل شيء يتم O (∩_∩) يا هاها ~