JavaScript事件冒泡

Question

我有这样的设置

 
<div onclick="SomeEvent"> 
    <input type=checkbox value=1>1 
    <input type=checkbox value=2>2 
    <input type=checkbox value=3>3 
</div> 

的问题时，上的复选框用户点击我不想SomeEvent解雇。

在某些事件中，我确实有行
“event.stopPropagation（）;”
但这似乎什么都不做。

Answer 1

更改内嵌的onclick这样：

onclick="SomeEvent(this, event)" 

然后在SomeEvent，这样做：

function SomeEvent(el, event) { 
    var target = event.srcElement || event.target; 

    if(el === target) { 
     // run your code 
    } 
} 

当您单击div元素本身，而不是这只会火码后裔。

如果有应该火处理程序等的后裔，那么这样做：

function SomeEvent(el, event) { 
    var target = event.srcElement || event.target; 

    if(target.nodeName.toLowerCase() !== 'input' || !target.type || target.type !== 'checkbox') { 
     // run your code 
    } 
} 

这将触发处理程序，除了那些上的复选框的任何点击。

Answer 2

如果事件冒泡模型，事件传播是从内部元素到外部元素。

这意味着event.stopPropagation（）;应该在输入的事件中而不是div中。

<div onclick="SomeEvent"> 
    <input type=checkbox value=1 onclick="stopPropagation()">1 
    <input type=checkbox value=2 onclick="stopPropagation()>2 
    <input type=checkbox value=3 onclick="stopPropagation()>3 
</div> 

现在的Javascript代码：

function stopPropagation() { 
    //... do something. 
    //stop propagation: 
    if (!e) var e = window.event; 
    e.cancelBubble = true; //IE 
    if (e.stopPropagation) e.stopPropagation(); //other browsers 
} 

更多信息：http://www.quirksmode.org/js/events_order.html

编辑：以上是一个快速的方式来显示冒泡模型的工作原理，但更好的回答使用JQuery解决这个问题将是：

<div id="mydiv"> 
    <input type="checkbox" value="1" /> 1 
    <input type="checkbox" value="2" /> 2 
    <input type="checkbox" value="3" /> 3 
</div> 

现在的Javascript代码：

$('#mydiv').click(function(e) { 
    //do something 
}); 

$('#mydiv input').click(function(e) { 
    //stop propagation: 
    if (!e) var e = window.event; 
    e.cancelBubble = true; //IE 
    if (e.stopPropagation) e.stopPropagation(); //other browsers 
});