Javascript-防止孩子的OnClick激發父母的OnClick-不使用JQuery

Question

我有兩個元素，像這樣：

var parent = document.getElementById("el");
var child = parent.children[0];

然后是一個eventListener：

parent.addEventListener("click", function() {
    alert("Hello World!")
});

問題是當您單擊孩子時，將觸發父母的click事件。

我只希望在單擊父級時觸發警報，而不在單擊子級時觸發。

我沒有使用JQuery，也不會使用。

我在Google上進行了搜索，所有結果都使用e.stopPropogation（即JQuery）。

那么，在普通JS中執行此操作的最佳方法是什么？

非常感謝。

Answer 1

您需要防止事件冒泡到父元素。 為此，您必須將另一個事件處理程序綁定到子元素：

child.addEventListener("click", function(e) {
    e.stopPropagation();
});

單擊事件氣泡，這意味着除非停止傳播，否則事件從子級到父級沿DOM樹傳播。

Answer 2

您可以檢查clicked元素的ID並使用它來控制觸發器：

http://jsfiddle.net/nccjgtp6/

<div id="el">
    This is a thing.
    <div id="el2"> This is a second thing. </div>
</div>

var parent = document.getElementById("el");
var child = parent.children[0];

parent.addEventListener("click", function(e) {
    console.log(e);
    if(e.srcElement.id == 'el') {
        alert('Hello world');
    }
});

我不知道這是否在所有瀏覽器中都能正常運行，但在Chrome瀏覽器中對我有效。

Answer 3

如果我沒記錯的話，那就是event.stopPropagation(); 您需要的代碼行。