javascript - jquery onclick 穿透到父元素

Question

我将如何阻止onclick内部元素也单击其父元素。

<div id="1" onclick="alert('1')">
<div id="2" onclick="alert('2')"></div>
</div>

如果第二个 div (id="2") 明显位于第一个 div 之上，并且被单击，您将同时收到警报 1 和 2。

我怎样才能避免这种情况，所以我只能从我（明显）点击的内容中获得警报，而不会完全禁用外部 div 可能拥有的任何 onclick 功能。

示例：http: //jsfiddle.net/DPCx8/

Answer 1

​var outer = document.getElementById('outer');
outer.onclick = function(event)
    {
        alert('outer');
        event.stopPropagation();
    }​​
    var inner = document.getElementById('inner');
inner.onclick = function(event)
    {
        alert('inner');
        event.stopPropagation();
    }

http://jsfiddle.net/DYykA/1/

Answer 2

您需要在子级停止传播，因此事件不会冒泡到父级。

$("#inner").on("click", function(e){
  e.stopPropagation();
});

Answer 3

用于event.stopPropogation();防止事件冒泡