区分onclick与嵌套元素

Question

我有两个元素在彼此之内，它们都有.click（）分配给它们，但是当我点击子元素（即使它有更高的z-index）时，父元素也会激活。这是一个例子：

<div class="element_add excluded"><div class="gear"></div></div>

jQuery看起来像这样

$(document).on("click", ".element_add", function() {
    alert("one");
});
$(document).on("click", ".element_add .gear", function() {
    alert("two");
});

他们两个都发火了.gear有更高的z指数。任何帮助，将不胜感激！

Answer 1

使用stopPropagation()（在event对象上）阻止事件冒泡到父级：

$(document).on("click",".element_add .gear",function(e){
    e.stopPropagation();
});