Cara Menggunakan Acara Roda Tetikus di halaman HTML5

Artikel ini meneroka bagaimana untuk meningkatkan laman web HTML5 dengan interaktiviti roda tetikus, melampaui menatal halaman standard untuk membolehkan tindakan seperti zoom. Cabaran teras terletak pada keserasian silang penyemak imbas, terutamanya dengan penggunaan Firefox dari acara DOMMouseScroll dan bukannya acara mousewheel yang lebih biasa.

mari kita ilustrasikan dengan contoh zooming imej:

Pertama, tambahkan imej ke HTML anda:

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174067598031395.jpg"  class="lazy" alt="How to Use the Mouse Wheel Event in HTML5 Pages " />

Seterusnya, tambahkan fungsi JavaScript untuk mengendalikan peristiwa roda tetikus:

function MouseWheelHandler(e) {
  // Cross-browser wheel delta
  var e = window.event || e; // IE support
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

  // Adjust image size (adjust min/max as needed)
  var myimage = document.getElementById("myimage");
  myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

  return false; // Prevent default scrolling
}

Akhirnya, lampirkan pengendali acara, menyumbang perbezaan penyemak imbas:

var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
  myimage.addEventListener("mousewheel", MouseWheelHandler, false);
  myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
  myimage.attachEvent("onmousewheel", MouseWheelHandler);
}

Kod ini secara dinamik menyesuaikan lebar imej berdasarkan arah roda tetikus. Fungsi Math.max dan Math.min memastikan lebar kekal dalam julat yang ditetapkan (50px hingga 800px dalam kes ini). Pernyataan return false menghalang tingkah laku menatal halaman lalai. Walaupun pendekatan ini berfungsi di seluruh pelayar utama, termasuk versi lama Internet Explorer, pengendalian Safari roda skrol mungkin memerlukan pelarasan selanjutnya bergantung pada versi WebKit tertentu.

Soalan Lazim (Soalan Lazim):

Soalan Lazim berikut menangani soalan umum mengenai penggunaan JavaScript untuk mengesan dan mengendalikan peristiwa roda tetikus:

• Mengesan peristiwa roda tetikus: Gunakan acara standard wheel untuk pelayar moden. Kod lama boleh menggunakan mousewheel (iaitu) atau DOMMouseScroll (Firefox), tetapi wheel menawarkan keserasian penyemak imbas terbaik.

• wheel vs mousewheel: wheel adalah kaedah standard dan pilihan. mousewheel adalah warisan dan kurang dipercayai.

• Menentukan arah tatal: sifat deltaY peristiwa wheel menunjukkan arah tatal menegak (positif untuk turun, negatif untuk UP). deltaX Menyediakan maklumat tatal mendatar.

• Mencegah tindakan lalai: Gunakan event.preventDefault() untuk menghentikan tingkah laku tatal lalai dan melaksanakan tindakan tersuai.

• menatal mendatar: Gunakan deltaX untuk mengesan menatal mendatar.

• deltaMode Harta: Harta ini menentukan unit deltaX dan deltaY (piksel, garis, atau halaman). Biasanya 0 (piksel).

• Sokongan Peranti Mudah Alih: Acara roda tetikus tidak digunakan secara langsung untuk peranti mudah alih. Peristiwa sentuh harus digunakan.

• keserasian Firefox: Firefox menyokong acara standard wheel.

• Kaedah JQuery:

  Kaedah JQuery's memudahkan pengendalian acara.

• simulasi peristiwa roda tetikus: Gunakan new WheelEvent('wheel', {deltaY: ...}) dan dispatchEvent() untuk tujuan ujian.

Atas ialah kandungan terperinci Cara Menggunakan Acara Roda Tetikus di halaman HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!