Mengapakah peristiwa klik dalam js tidak boleh dilaksanakan berulang kali?

Acara klik dalam JavaScript tidak boleh dilaksanakan berulang kali kerana mekanisme menggelegak acara. Untuk menyelesaikan masalah ini, anda boleh mengambil langkah berikut: Gunakan tangkapan peristiwa: Tentukan pendengar acara untuk dicetuskan sebelum acara berbuih. Menyerahkan acara: Gunakan event.stopPropagation() untuk menghentikan acara menggelegak. Gunakan pemasa: cetuskan pendengar acara sekali lagi selepas beberapa ketika.

Mengapa klik acara dalam JavaScript tidak boleh dilaksanakan berulang kali?

Dalam JavaScript, peristiwa klik hanya boleh dicetuskan apabila elemen diklik buat kali pertama. Ini disebabkan oleh mekanisme menggelegak peristiwa, di mana peristiwa menggelegak daripada elemen pencetus kepada elemen akar dokumen.

Event Bubbling

Apabila pengguna mengklik pada elemen, acara tersebut menyala pada elemen tersebut terlebih dahulu. Acara itu kemudiannya terus menggelembung ke elemen induknya, ke elemen induknya dan seterusnya, sehingga ia mencapai elemen akar dokumen.

Jika elemen mempunyai berbilang pendengar acara klik, hanya pendengar pertama akan bertindak balas. Ini kerana apabila acara itu menggelegak ke elemen, pendengar lain telah pun dipecat.

Penyelesaian

Terdapat beberapa cara untuk mengelakkan pelaksanaan berulang peristiwa klik dalam JavaScript:

• Gunakan tangkapan peristiwa: Dengan menggunakan parameter ketiga kaedah addEventListener() >useCapture, anda boleh menentukan sama ada pendengar acara dicetuskan sebelum acara muncul. Menetapkan useCapture kepada true akan mencetuskan pendengar sebelum acara muncul.
addEventListener() 方法的第三个参数 useCapture，您可以指定在事件冒泡之前是否触发事件侦听器。将 useCapture 设置为 true 将在事件冒泡之前触发侦听器。
• 移交事件：您可以使用 event.stopPropagation() 方法阻止事件冒泡。这将防止事件进一步向上冒泡到文档的根元素。
• 使用计时器：您可以使用 setTimeout() 或 setInterval() 函数在一段时间后再次触发事件侦听器。这将允许在第一次单击事件触发后执行后续单击事件。

示例

使用事件捕获来允许重复执行点击事件：

<code class="javascript">element.addEventListener('click', function() {
  // 代码...
}, true);</code>

使用 event.stopPropagation()

Acara penyerahan

: Anda boleh menggunakan kaedah event.stopPropagation() untuk menghentikan acara daripada menggelegak. Ini akan menghalang acara daripada menggelegak lebih jauh ke elemen akar dokumen.

🎜Gunakan pemasa🎜: Anda boleh menggunakan fungsi setTimeout() atau setInterval() untuk mencetuskan pendengar acara semula selepas tempoh masa. Ini akan membolehkan peristiwa klik berikutnya dilaksanakan selepas peristiwa klik pertama dicetuskan. 🎜🎜Contoh🎜🎜🎜Gunakan tangkapan acara untuk membenarkan pelaksanaan berulang acara klik: 🎜

<code class="javascript">element.addEventListener('click', function(event) {
  event.stopPropagation();
  // 代码...
});</code>

🎜Gunakan event.stopPropagation() untuk menghentikan acara menggelegak: 🎜rreee🎜Gunakan Pemasa untuk mencetuskan acara klik sekali lagi: 🎜

<code class="javascript">let timer;

element.addEventListener('click', function() {
  clearTimeout(timer);
  // 代码...
  
  timer = setTimeout(function() {
    element.click();
  }, 500); // 500 毫秒后再次触发点击事件
});</code>

Atas ialah kandungan terperinci Mengapakah peristiwa klik dalam js tidak boleh dilaksanakan berulang kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!