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

看到这个小提琴：

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 个答案: