jsのクリックイベントが繰り返し実行できない理由

JavaScript のクリック イベントは、イベント バブリングのメカニズムにより繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。 イベント キャプチャを使用する: イベントがバブルアップする前に起動するイベント リスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベント リスナーを再度トリガーします。

#JavaScript のクリック イベントを繰り返し実行できないのはなぜですか?

JavaScript では、クリック イベントは要素が初めてクリックされたときにのみトリガーできます。これは、イベントがトリガー要素からドキュメントのルート要素までバブルアップするイベント バブリング メカニズムによるものです。

イベントバブリング

ユーザーが要素をクリックすると、最初にその要素でイベントが発生します。その後、イベントは、ドキュメントのルート要素に到達するまで、その親要素、その親要素などにバブルし続けます。

要素に複数のクリック イベント リスナーがある場合、最初のリスナーのみが応答します。これは、イベントがその要素までバブルアップしたときに、他のリスナーがすでに起動されているためです。

解決策

JavaScript でクリック イベントが繰り返し実行されることを回避するには、いくつかの方法があります。

• イベント キャプチャを使用します: addEventListener() メソッドの 3 番目のパラメーター useCapture を使用すると、イベントがバブルアップする前にイベント リスナーをトリガーするかどうかを指定できます。 useCapture を true に設定すると、イベントがバブルアップする前にリスナーがトリガーされます。
• ハンドオーバー イベント : event.stopPropagation() メソッドを使用して、イベントのバブリングを停止できます。これにより、イベントがドキュメントのルート要素までさらにバブリングするのを防ぎます。
• タイマーの使用: setTimeout() または setInterval() 関数を使用すると、一定期間後にイベント リスナーを再度トリガーできます。時間。これにより、最初のクリック イベントが発生した後に後続のクリック イベントを実行できるようになります。

例

イベント キャプチャを使用してクリック イベントを繰り返し実行できるようにします:

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

Use

event.stopPropagation() イベントの発生を停止するには:

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

タイマーを使用してクリック イベントを再度トリガーします:

<code class="javascript">let timer;

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

以上がjsのクリックイベントが繰り返し実行できない理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。