Pourquoi l'événement click dans js ne peut-il pas être exécuté à plusieurs reprises ?

Les événements de clic en JavaScript ne peuvent pas être exécutés à plusieurs reprises en raison du mécanisme de bouillonnement d'événements. Pour résoudre ce problème, vous pouvez prendre les mesures suivantes : Utiliser la capture d'événement : Spécifiez un écouteur d'événement à déclencher avant que l'événement ne se déclenche. Remise des événements : utilisez event.stopPropagation() pour arrêter le bouillonnement des événements. Utilisez une minuterie : déclenchez à nouveau l'écouteur d'événements après un certain temps.

Pourquoi les événements de clic en JavaScript ne peuvent-ils pas être exécutés à plusieurs reprises ?

En JavaScript, les événements de clic ne peuvent être déclenchés que lorsque l'on clique sur un élément pour la première fois. Cela est dû au mécanisme de diffusion d'événements, dans lequel les événements remontent de l'élément déclencheur à l'élément racine du document.

Event Bubbling

Lorsque l'utilisateur clique sur un élément, l'événement se déclenche en premier sur cet élément. L'événement continue ensuite à se propager vers son élément parent, vers son élément parent, et ainsi de suite jusqu'à ce qu'il atteigne l'élément racine du document.

Si un élément a plusieurs écouteurs d'événements de clic, seul le premier écouteur répondra. En effet, lorsque l'événement se propage jusqu'à l'élément, d'autres auditeurs ont déjà été renvoyés.

Solution

Il existe plusieurs façons d'éviter l'exécution répétée d'événements de clic en JavaScript :

• Utiliser la capture d'événement : En utilisant le troisième paramètre de la méthode addEventListener()useCapture, vous pouvez spécifier si l'écouteur d'événement est déclenché avant que l'événement n'apparaisse. Définir useCapture sur true déclenchera l'écouteur avant que l'événement n'éclate.
addEventListener() 方法的第三个参数 useCapture，您可以指定在事件冒泡之前是否触发事件侦听器。将 useCapture 设置为 true 将在事件冒泡之前触发侦听器。
• 移交事件：您可以使用 event.stopPropagation() 方法阻止事件冒泡。这将防止事件进一步向上冒泡到文档的根元素。
• 使用计时器：您可以使用 setTimeout() 或 setInterval() 函数在一段时间后再次触发事件侦听器。这将允许在第一次单击事件触发后执行后续单击事件。

示例

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

element.addEventListener('click', function() {
  // 代码...
}, true);

使用 event.stopPropagation()

Événement de transfert

 : vous pouvez utiliser la méthode event.stopPropagation() pour empêcher l'événement de bouillonner. Cela empêchera l'événement de remonter jusqu'à l'élément racine du document.

🎜Utilisez une minuterie🎜 : vous pouvez utiliser la fonction setTimeout() ou setInterval() pour déclencher à nouveau l'écouteur d'événements après un certain temps. Cela permettra aux événements de clic suivants d'être exécutés après le déclenchement du premier événement de clic. 🎜🎜Exemple🎜🎜🎜Utilisez la capture d'événement pour permettre l'exécution répétée d'événements de clic : 🎜

element.addEventListener('click', function(event) {
  event.stopPropagation();
  // 代码...
});

🎜Utilisez event.stopPropagation() pour arrêter le bouillonnement d'événement : 🎜

let timer;

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

🎜Utilisez Minuterie pour déclencher à nouveau l'événement de clic : 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!