Apakah kaedah acara tetikus dalam jquery?-Soal Jawab bahagian hadapan-php.cn

Apakah kaedah acara tetikus dalam jquery?

青灯夜游

Lepaskan： 2022-11-21 19:33:37

asal

5089 orang telah melayarinya

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.

Apakah kaedah acara tetikus dalam jquery?

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

event.currentTarget
event.preventDefault()
event.stopPropagation()

Contoh acara tetikus JQuery

Acara: Acara klik tetikus

click

Acara: Acara tekan tetikus

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

Salin selepas log masuk

mousedown

acara: acara masuk tetikus

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

Salin selepas log masuk

mouseenter

acara: acara keluar tetikus

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

Salin selepas log masuk

mouseleave

Acara: Acara gerak tetikus

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

Salin selepas log masuk

mousemove

Acara: Acara gerak tetikus

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

Salin selepas log masuk

mouseout

Acara: Tekan tetikus dan acara pelepasan butang kiri

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

Salin selepas log masuk

mouseup[Pembelajaran yang disyorkan:

tutorial video javascript

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

Salin selepas log masuk

]

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