冒泡触发父项的点击事件

Question

我想使用dispatchEvent在父容器上手动触发click事件。 事件冒泡似乎不起作用。

// trigger click event on parent container
parent.dispatchEvent(new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: 4,
    clientY: 4
}));

...

child.addEventListener('click', function(e) {
    alert('click')
}, false);

看到这个小提琴：

https://jsfiddle.net/o4j0cjyp/2/

Answer 1

事件起泡或根本没有起泡。 我知道失败的唯一方法是获取目标元素中的所有元素，并遍历集合，从而在所有元素，某些元素或您需要的任何情况下调度事件。 这可能很糟糕，就像您不告诉事件不要冒泡一样，您很容易陷入无限循环。

实现目标的更好方法是使用事件委托，在事件委托中，将公共父对象用作事件侦听器元素。 然后，当事件发生时，检查事件目标，如果目标是目标，则不要执行任何工作。

因此，对于您的html

<div id="parent-container">
  <div id="child-container">
    this area has a click listener
  </div>
</div>
<div id="click-info">No 'click' event yet.</div>
<div class="btn" id="trigger-parent-btn">
  trigger 'click' event on parent container<br>
  [ does not work ]
</div>
<div class="btn" id="trigger-child-btn">
  trigger 'click' event directly on child container
</div>

无需在每个事件监听器上都设置事件监听器，而是尝试触发子事件或父事件，我们可以在公共父对象（在本例中为<body> ）上设置单击监听器。 在这里，我们可以测试目标元素是否是我们要触发的显示点击信息的三个元素之一，如果需要，则显示信息。

 var info = document.querySelector("#click-info"); document.body.addEventListener("click",function(event){ var target = event.target; if(target.classList.contains("btn") || target.id=="child-container"){ info.innerHTML = 'Clicked at ' + event.clientX + ':' + event.clientY; } })

 <div id="parent-container"> <div id="child-container"> this area has a click listener </div> </div> <div id="click-info">No 'click' event yet.</div> <div class="btn" id="trigger-parent-btn"> trigger 'click' event on parent container<br> [ does not work ] </div> <div class="btn" id="trigger-child-btn"> trigger 'click' event directly on child container </div>

冒泡触发父项的点击事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-05 15:53:43

冒泡触发父项的点击事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-05 15:53:43

解决方案1
1 已采纳 2016-02-05 15:53:43