父母冒泡觸發點擊事件

我想手動觸發父容器上的點擊事件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

父母冒泡觸發點擊事件

回答

相關問題