Mari kita lihat masalah apa yang akan terjadi ketika seret sebelumnya ada ketika sesuatu di sekitarnya? Tidak akan ada masalah di browser lanjutan. Mari kita mengujinya di IE7 dan masalahnya akan keluar. Seperti yang ditunjukkan
Kita dapat dengan jelas melihat bahwa teks telah dipilih. Maka pengalaman pengguna ini sangat buruk dan tidak nyaman untuk digunakan. Ngomong -ngomong, kami menambahkan pengembalian palsu sebelumnya; membantu kami menyelesaikan banyak masalah. Jika kita menghapus ini, masalah yang sama akan terjadi di Chrome. Jadi artinya, pengembalian ini salah; dapat menyelesaikan masalah browser Chrome ff IE9+.
Bahkan, dalam pengembangan kami, ada banyak elemen di halaman, dan tidak mungkin untuk memiliki hanya satu div. Tempat lain tidak akan dipilih saat Anda menyeret, seperti peta Baidu, Anda dapat bermain dengannya.
Jadi bagaimana kita melakukan hambatan seperti itu? Bisakah itu menyelesaikan masalah IE7?
Larutan:
Kita bisa menggunakan trik kecil untuk menyelesaikannya. Trik ini hanya dapat didukung di IE6-8, dan benar-benar dapat menyelesaikan masalah kita, karena browser lain menggunakan pengembalian palsu; Mari kita lihat apa triknya
Ini adalah tangkapan acara! Lai Lampirkan kode ke deskripsi singkat
<itement> </iteme> <script type = "text/javaScript"> window.onload = function () {var obtn = document.getElementById ("btn"); OBTN.OnClick = function () {alert (1); }; // Acara di semua tempat di halaman web terkonsentrasi pada tombol IE Dedicated Obtn.setCapture (); // Di mana pun Anda mengklik, Anda pop A} </script> </head> <body> <input type = "tombol" id = "btn" value = "tombol"/> </body>Bahkan, peristiwa di semua tempat di halaman terkonsentrasi pada suatu titik, dan muncul saat mengklik posisi apa pun dari halaman, yang merupakan fungsi dari setCapture ().
Kumpulkan semua acara ke satu tombol untuk ditangani! Lai Ini hanya kompatibel dengan IE! Lai
Dengan cara ini, izinkan saya melihat cara memodifikasi kode sebelumnya. . . .
Pertama, kami mengubah semua dokumen kembali ke Div. Apakah Anda ingat bahwa kami telah mengatakan sebelumnya karena mouse menyeret lebih cepat, mudah untuk menyeret keluar div, jadi kami menambahkan semua acara ke dokumen.
Dan sekarang tidak perlu melakukan ini, tambahkan setCapture () ke div kami sebelumnya untuk melihat efeknya.
<body> Teks di IE 7 akan dipilih. <BR /> Jika Anda tidak menambahkan pengembalian False Chrome FF, akan ada masalah seperti itu ASDSADAD <br /> <div id = "Div1"> Asdsadad Asdsadad Asdsadad </SIV> ASDSADADASDSDSADAD </body>
<style type = "text/css"> #div1 {width: 200px; Tinggi: 200px; Latar Belakang: Merah; Posisi: Absolute; } </style> <script type = "text/javascript"> // seret dan lepas div kosong. Versi rendah Firefox memiliki bug window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || peristiwa; 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 (); mengembalikan false; // Blokir acara default dan selesaikan bug Firefox}; }; </script>Pada saat ini, kami sebenarnya tidak memiliki masalah menyeret keluar div ketika kami menyeretnya dengan cepat. Bahkan, setelah menambahkan setCapture (), semua acara di seluruh halaman web akan dikumpulkan di div ini.
Bahkan, teks ini tidak akan dipilih sekarang. Mengapa? Karena semua acara dalam teks dan gambar sekarang ada di div, mereka tidak bisa lagi mendapatkan acara! Jadi secara alami mereka tidak akan dipilih.
Tentu saja ada masalah lain sekarang? ? ? ? Anda akan menemukan bahwa ketika Anda mencoba memilih kata -kata itu, Anda tidak akan dipilih.
Apa yang harus saya lakukan? Semua peristiwa terkonsentrasi pada div. . . !!!!!!
Jadi, pada kenyataannya, setCapture ini () seperti kunci. Sekarang terkunci, dan semua acara ada di div. Sekarang sudah cukup untuk membukanya. Yang sesuai adalah Releasecapture ();
Releasecapture (); adalah untuk melepaskan penangkapan. Faktanya, tambahkan saja saat mouse dinaikkan.
window.onload = function () {var odiv = document.geteLementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || peristiwa; 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 (); mengembalikan false; // Blokir acara default dan selesaikan bug Firefox}; };Sekarang kita dapat menyelesaikan masalah pemilihan teks. Akhirnya, kami duduk dan kompatibel. Bahkan, setCapture ini () tidak kompatibel, dan salah meletakkannya di browser lain.
Itu sangat sederhana. Kita hanya perlu menggabungkan kode dari ini dan yang terakhir. Buat saja penilaian If kompatibel. Akhirnya, kode terorganisir terpasang
<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 || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; if (odiv.setCapture) {odiv.onmouseMove = mousemove; odiv.onmouseUp = mouseUp; odiv.setCapture (); // yaitu 7 teks berikut tidak akan dipilih, sebenarnya teks atau gambar yang tidak dapat diperoleh.} Lain {document.onmouseMove = mouseMove; document.onmouseUp = mouseUp; } function mousemove (ev) {var oevent = ev || peristiwa; 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 (); // Rilis Capture}} return false; // Blokir acara default dan selesaikan bug Firefox}; }; </script>Oke, semuanya sudah selesai o (∩_∩) o haha ~