Pemprosesan menggelegak acara tetikus dengan kemahiran JavaScript dan JQuery

Acara pergerakan tetikus ringkas:

Masuk

Salin kod Kod adalah seperti berikut: mouseenter: tidak menggelegak tetikus: gelembung Acara alih tetikus akan dicetuskan apabila penuding tetikus melepasi elemen yang dipilih atau sub-elemennya Acara tetikus hanya akan dicetuskan apabila penuding tetikus melepasi elemen yang dipilih

Bergerak keluar

Salin kod Kod adalah seperti berikut: daun tikus: tidak menggelegak keluar tetikus: menggelegak Tidak kira penuding tetikus meninggalkan elemen yang dipilih atau mana-mana elemen anak, acara keluar tetikus akan dicetuskan Peristiwa mouseleave hanya akan dicetuskan apabila penunjuk tetikus meninggalkan elemen yang dipilih

Mari kita amati masalah melalui kes:

Ikat acara keluar tetikus ke tahap bersarang, dan anda akan mendapati bahawa acara keluar tetikus berbeza daripada apa yang anda bayangkan

Salin kod Kod adalah seperti berikut: Elemen anak luar

elemen kanak-kanak

0

var i = 0; var k = 0;

document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){ document.querySelectorAll("#inshow")[0].textContent = (i) e.stopPropagation(); },salah)

document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){ document.querySelectorAll("#outshow")[0].textContent = (k) },salah)

Kami menemui masalah dengan acara keluar tetikus:

1. Tidak dapat mengelakkan menggelegak 2. Ia juga akan dicetuskan pada elemen dalaman anak

Masalah yang sama juga wujud dengan acara alih tetikus, jadi bagaimana kita hendak berhenti menggelegak apabila kaedah stopPropagation gagal?

1. Untuk mengelakkan pencetus berulang tetikus dan tetikus, satu atribut berkaitanSasaran objek peristiwa digunakan di sini Atribut ini digunakan untuk menentukan atribut nod yang berkaitan bagi peristiwa alih tetikus dan tetikus. Ringkasnya, apabila peristiwa alih tetikus dicetuskan, atribut relatedTarget mewakili nod yang baru ditinggalkan tetikus Apabila peristiwa keluar tetikus dicetuskan, ia mewakili objek yang digerakkan oleh tetikus. Oleh kerana MSIE tidak menyokong atribut ini, ia mempunyai atribut alternatif, iaitu fromElement dan toElement. 2. Dengan atribut ini, kita dapat mengetahui dengan jelas objek yang mana tetikus kita bergerak dan dari mana ia bergerak. Dengan cara ini, kita boleh menentukan sama ada objek yang berkaitan berada di dalam objek yang ingin kita cetuskan acara itu, atau sama ada objek itu sendiri. Melalui penghakiman ini, kita boleh memilih secara munasabah sama ada untuk benar-benar mencetuskan peristiwa itu. 3. Di sini kita juga menggunakan kaedah untuk menyemak sama ada objek terkandung dalam objek lain, kaedah mengandungi. MSIE dan FireFox menyediakan kaedah semakan masing-masing, dan fungsi terkandung di sini.

Pemprosesan jQuery adalah sama

Salin kod Kod adalah seperti berikut: jQuery.each({ mouseenter: "mouseover", mouseleave: "mouseout", pointerenter: "pointerover", pointerleave: "pointerout" }, fungsi(asal, betulkan) { jQuery.event.special[orig] = { delegateType: betulkan, bindType: betulkan, pemegang: fungsi(acara) { var ret, sasaran = ini, berkaitan = event.relatedTarget, handleObj = event.handleObj;

// Untuk penunjuk tetikus/keluar hubungi pengendali jika berkaitan di luar sasaran. // NB: Tiada relatedTarget jika tetikus keluar/masuk tetingkap penyemak imbas jika (!berkaitan || (berkaitan !== sasaran && !jQuery.mengandungi(sasaran, berkaitan))) { event.type = handleObj.origType; ret = handleObj.handler.apply(this, arguments); event.type = betulkan; } pulang ret; } }; });

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Pemprosesan menggelegak acara tetikus dengan kemahiran JavaScript dan JQuery_javascript