冒泡触发父级点击事件

Question

我想在 dispatchEvent 的父容器上手动触发点击事件。事件冒泡好像不行

// 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);

看到这个fiddle:

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>

冒泡触发父级点击事件

trigger click event on parent with bubbling

javascript

event-bubbling