Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mengesan dan Mengendalikan Peristiwa Roda Tetikus dalam jQuery?

Bagaimana untuk Mengesan dan Mengendalikan Peristiwa Roda Tetikus dalam jQuery?

DDD
Lepaskan: 2024-10-26 10:04:30
asal
946 orang telah melayarinya

How to Detect and Handle Mouse Wheel Events in jQuery?

Pengendalian Acara Roda Tetikus dalam jQuery

Walaupun jQuery menyediakan sokongan teguh untuk mengendalikan pelbagai acara pengguna, termasuk acara tatal, anda mungkin menghadapi keperluan untuk menangkap secara khusus peristiwa roda tetikus. Ini boleh berguna, contohnya, apabila melaksanakan ciri UI dipacu tetikus atau fungsi tatal tersuai.

Peristiwa Roda Tetikus jQuery:

Untuk mengendalikan acara roda tetikus dalam jQuery , anda boleh menggunakan roda tetikus pengikat acara. Peristiwa ini tercetus apabila pengguna menatal dengan roda tetikus mereka. Objek acara (diwakili sebagai e) termasuk sifat originalEvent.wheelDelta, yang menyediakan arah tatal roda.

Menangkap Arah Tatal Roda:

Dengan menyemak nilai originalEvent.wheelDelta / 120, anda boleh menentukan arah tatal:

  • Nilai positif menunjukkan tatal ke atas (menatal ke arah atas halaman).
  • Nilai negatif mewakili ke bawah menatal (menatal ke bahagian bawah halaman).

Contoh Penggunaan:

Untuk menunjukkan cara melaksanakan pengendalian acara roda tetikus, pertimbangkan kod jQuery berikut :

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});
Salin selepas log masuk

Dalam contoh ini, kami mengikat acara roda tetikus pada elemen dengan ID "foo." Apabila pengguna menatal roda tetikus ke atas elemen ini, pengendali acara dicetuskan dan log arah tatal ke konsol.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan dan Mengendalikan Peristiwa Roda Tetikus dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan