Artikel Pengenalan Wulin.com (www.vevb.com): Bagaimana HTML5 menggunakan acara roda mouse?
Menambahkan acara roda mouse ke halaman web HTML5 dapat lebih memungkinkan pengguna untuk berinteraksi dengan halaman web. Di HTML5, roda gulir mouse tidak hanya dapat meluncur ke atas dan ke bawah halaman web. Bahkan, Anda juga dapat mengandalkan ini untuk menyelesaikan lebih banyak fungsi, seperti memperbesar dan mengurangi bidang bidang tampilan.
Sebagian besar browser mendukung acara roda mouse, sehingga Anda dapat berlangganan metode acara roda mouse terlebih dahulu. Setiap kali acara dipicu, Anda bisa mendapatkan properti yang disebut Wheeldelta, yang mewakili ukuran roda mouse yang baru saja berubah. Nilai positif menunjukkan bahwa roda gulir meluncur ke bawah, dan nilai negatif menunjukkan bahwa roda gulir meluncur ke atas. Semakin besar nilai absolut dari nilai, semakin besar rentang geser.
Sayangnya, masih ada browser yang tidak mendukung acara roda mouse. Itu Firefox. Mozilla telah menerapkan pemrosesan acara yang disebut DommousesCroll, yang akan melewati parameter acara bernama acara dengan properti yang disebut detail. Namun, properti detail ini berbeda dari Wheeldelta, yang hanya dapat mengembalikan nilai -nilai positif, yaitu, ia hanya dapat bersikeras pada nilai roda mouse yang menggulir ke bawah.
Anda harus memberikan perhatian khusus bahwa Apple juga menonaktifkan gulir mouse untuk mengontrol halaman yang meluncur ke atas dan ke bawah di browser Safari, tetapi fungsi ini masih digunakan secara normal di mesin webkit, sehingga kode yang Anda tulis tidak akan memicu masalah apa pun.
Tambahkan metode penanganan acara roda mouse
Pertama, kami menambahkan gambar ke halaman web, dan kami dapat menggunakan roda mouse untuk mengontrol zoom gambar ini nanti.
<img id = myimage src = myimage.jpg alt = gambar saya />
Sekarang tambahkan kode pemrosesan acara roda mouse
var myimage = document.getElementById (myimage);
if (myimage.addeventListener) {
// IE9, Chrome, Safari, Opera
myimage.addeventlistener (mousewheel, mousewheelhandler, false);
// Firefox
myimage.addeventlistener (dommousescroll, mousewheelhandler, false);
}
// yaitu 6/7/8
lain myimage.attachevent (onmousewheel, mousewheelhandler);
Praktik pemrosesan yang dapat didukung oleh browser yang berbeda
Dalam kasus berikut, kami akan membalikkan nilai detail Firefox dan mengembalikan salah satu dari 1 atau -1
fungsi mousewheelhandler (e) {
// delta roda lintas-browser
var e = window.event || e; // dukungan IE lama
var delta = math.max (-1, math.min (1, (e.wheeldelta || -e.detail))));
Sekarang kami langsung memutuskan kisaran ukuran gambar. Kode berikut menetapkan kisaran lebar gambar antara 50-800 piksel
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * delta))) + px;
mengembalikan false;
}
Poin terakhir, kami mengembalikan False dalam metode ini untuk mengakhiri pemrosesan acara roda mouse standar jika ia meluncur ke atas dan ke bawah halaman web.