父母冒泡触发点击事件

我想手动触发父容器上的点击事件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/

来源

2016-02-05 Christoph Bühler

你的意思，试图触发子元素上的事件？事件泡沫不下来。 –

@PatrickEvans哦，我以为冒泡正在消失。 –

@PatrickEvans有没有办法让泡沫变成另一种方式？ –

事件冒泡或根本没有。我所知道的唯一方法就是获取目标元素中的所有元素，并迭代收集所有元素（包括其中一些元素，或者任何您的情况需要的）上的事件。这可能是糟糕的，因为如果你不告诉事件不要冒泡，你很容易就会陷入无限循环。

一个更好的方式去实现你的目标是使用事件委托，在这里你使用一个共同的父亲作为事件监听器元素。然后当事件发生时检查事件目标，如果它是你想要的而不是做任何工作。

因此，对于你的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>

来源

2016-02-05 15:53:43

父母冒泡触发点击事件

回答

相关问题