Apakah kaedah acara tetikus dalam jquery?

Kaedah acara tetikus dalam jquery ialah: 1. Klik(), yang boleh mencetuskan peristiwa klik tetikus kiri 2. contextmenu(), yang boleh mencetuskan acara klik tetikus kanan; Boleh mencetuskan acara klik dua kali tetikus; mouseenter(), peristiwa pergerakan tetikus boleh dicetuskan, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.1, komputer Dell G3.

Organisasi acara tetikus JQuery

1 Klik: klik kiri, klik kanan

. Click(): Klik butang kiri tetikus

untuk mengikat pengendali pada acara "klik" JavaScript, atau untuk mencetuskan acara "klik" pada elemen. (Menyokong acara tab skrin sentuh)

.contextmenu(): Apabila anda klik kanan pada butang menu klik kanan

, anda boleh menolak menu klik kanan.

2 Klik dua kali

.dblclick(): Pencetus klik dua kali

3 >

.mousedown(): Tetikus ditekan

.mouseup(): Tetikus dilepaskan

4. Pergerakan tetikus

. mousemove(): Pergerakan tetikus

5 Kemasukan tetikus, pergerakan tetikus keluar

.mouseenter(): Dicetuskan apabila tetikus bergerak ke dalam elemen.

.mouselevave(): Dicetuskan apabila tetikus bergerak keluar daripada elemen.

.mouseout(): Dicetuskan apabila tetikus bergerak keluar dari elemen, dan juga dicetuskan apabila tetikus bergerak masuk dan keluar dari elemen anaknya.

.mouseover(): Dicetuskan apabila tetikus bergerak ke dalam elemen, dan juga apabila tetikus bergerak masuk dan keluar daripada elemen anaknya.

6. Penatalan roda tetikus

Pustaka Jquery terbina dalam tidak menyokong ini, tetapi terdapat perpustakaan sambungan yang menyokong acara roda.

7. Peristiwa lanjutan jquery lain

.hover(): Ikat fungsi acara mouseenter/mousevel pada elemen yang sepadan, masing-masing apabila penunjuk tetikus masuk dan Dilaksanakan apabila meninggalkan unsur. Ikat satu fungsi acara pada elemen yang sepadan untuk dilaksanakan apabila penunjuk tetikus masuk dan meninggalkan elemen.

.toggle() : Mengikat dua atau lebih pengendali pada elemen yang sepadan untuk dilakukan pada klik ganti.

Parameter acara tetikus

Parameter biasa acara

• event.type: Dapatkan jenis acara , jenis acara yang mencetuskan elemen

• event.pageX dan event.pageY: Dapatkan koordinat semasa tetikus berbanding dengan halaman, dan anda boleh menentukan elemen Nilai koordinat pada halaman semasa adalah berdasarkan halaman sebagai titik rujukan dan tidak berubah dengan pergerakan peluncur

• event.target: Dapatkan elemen pencetus Acara

Perbezaan antara ini dan event.target:

Acara dalam js akan menggelegak, jadi ini Ia boleh berubah, tetapi acara.sasaran tidak akan berubah sentiasa menjadi elemen DOM sasaran yang menerima acara secara langsung; ialah kedua-dua objek DOM dan boleh ditukar menjadi objek jquery: $(this) dan $(event.target)

event.which

: Dapatkan kiri, tengah dan kanan butang tetikus dalam acara klik tetikus (butang kiri 1, butang tengah 2, butang kanan 3 ), nilai kod kekunci papan kekunci dalam acara papan kekunci
• event.currentTarget
: Mendapat Objek DOM peristiwa tercetus semasa sebelum menggelegak, yang bersamaan dengan ini
• event.preventDefault()
: Cegah gelagat lalai Anda boleh menggunakan event.isDefaultPrevented() untuk menentukan sama ada preventDefault mempunyai telah dipanggil.
• event.stopPropagation()
: Menghalang peristiwa daripada berlaku, peristiwa boleh menggelegak pada pokok DOM dan tidak mencetuskan fungsi pemprosesan acara elemen pendahulu, anda boleh menggunakan event.isPropagationStopped() untuk menentukan sama ada stopPropagation telah dipanggil

Contoh acara tetikus JQuery

Acara: Acara klik tetikus

click

Acara: Acara tekan tetikus

<script>
    $('p').click(function(){
        alret('被点击一次')
    })
</script>

mousedown

acara: acara masuk tetikus

<script>
    $('p').mousedown(function(){
        alret('鼠标按下一次')
    })
</script>

mouseenter

acara: acara keluar tetikus

<script>
    $('p').mousedown(function(){
        alret('鼠标进入一次')
    })
</script>

mouseleave

Acara: Acara gerak tetikus

<script>
    $('p').mousedown(function(){
        alret('鼠标离开一次')
    })
</script>

mousemove

Acara: Acara gerak tetikus

<script>
    $('p').mousedown(function(){
        alret('鼠标移动了') // 注意这个事件是根据鼠标的位置发生变化，意思就是，你移动一次鼠标他就出触发一次
    })
</script>

mouseout

Acara: Tekan tetikus dan acara pelepasan butang kiri

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4"); // 注：鼠标移开用户指定的某个元素的时候会触发这个事件
});

mouseup[Pembelajaran yang disyorkan:

tutorial video javascript

$("p").mouseout(function(){
  alret('鼠标升起'); // 注：用户在点击完左键之后，松开左键会触发此事件
});

]

Atas ialah kandungan terperinci Apakah kaedah acara tetikus dalam jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!