考虑以下：
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
我怎样才能做到这一点，当用户单击跨度时，它不会触发div's click 事件？
如何使用内联 onclick 属性停止事件传播？
IT技术
javascript
html
events
dom
2021-01-13 08:49:02
6个回答
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
对于 IE： window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
有两种方法可以从函数内部获取事件对象：
- 第一个参数，在符合 W3C 的浏览器（Chrome、Firefox、Safari、IE9+）中
- Internet Explorer 中的 window.event 对象 (<=8)
如果您需要支持不遵循 W3C 建议的旧版浏览器，通常在一个函数中，您将使用如下所示的内容：
function(e) {
var event = e || window.event;
[...];
}
它将检查第一个，然后检查另一个并存储在事件变量中找到的任何一个。但是，在内联事件处理程序中，没有e要使用的对象。在这种情况下，您必须利用arguments始终可用的集合，并引用传递给函数的完整参数集：
onclick="var event = arguments[0] || window.event; [...]"
但是，一般来说，如果您需要处理诸如停止传播之类的复杂操作，您应该避免使用内联事件处理程序。从中长期来看，单独编写事件处理程序并将它们附加到元素是一个更好的主意，无论是可读性还是可维护性。
请记住，FireFox 不支持 window.event，因此它必须符合以下条件：
e.cancelBubble = true
或者，您可以使用 FireFox 的 W3C 标准：
e.stopPropagation();
如果你想变得花哨，你可以这样做：
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
使用此功能，它将测试是否存在正确的方法。
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
我有同样的问题 - IE 中的 js 错误框 - 就我所见，这在所有浏览器中都可以正常工作（event.cancelBubble=true 在 IE 中完成这项工作）
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
其它你可能感兴趣的问题