Pemprosesan menggelegak acara tetikus dengan kemahiran JavaScript dan JQuery_javascript

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

0

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;
            }
        };
    });