考虑以下内容:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
当用户点击 span 时,如何使其不触发 div
的点击事件?
考虑以下内容:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
当用户点击 span 时,如何使其不触发 div
的点击事件?
<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建议的旧版浏览器,在函数内通常会使用以下类似代码:
function(e) {
var event = e || window.event;
[...];
}
代码会首先检查第一个参数,再检查第二个参数,并将找到的参数存储在事件变量中。但在内联事件处理程序中,没有可用的e
对象。在这种情况下,您必须利用始终可用并引用传递给函数的完整参数集的arguments
集合:
onclick="var event = arguments[0] || window.event; [...]"
然而,一般来说,如果你需要做像停止事件传播这样复杂的操作,你应该避免使用内联事件处理程序。将事件处理程序单独编写,然后将它们附加到元素上,在中长期内会更好地提高代码的可读性和可维护性。
onclick="foo(event)"
,然后在函数中使用 function foo(event){/* 使用事件对象进行操作 */}
。这种方法适用于IE和W3C事件模型。 - RobG请记住,window.event在FireFox中不被支持,因此必须使用类似以下内容的替代方法:
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;
}
}
<div onclick="myEventHandler(event);">
- DarkDuste.cancelBubble
返回false!它无法到达e.cancelBubble = true;
指令。使用SoftwareARM的条件代替!! - mauretto使用该函数,它将测试正确方法的存在性。
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
我有同样的问题 - 在IE中出现了js错误框 - 据我所知,这在所有浏览器中都能正常工作(在IE中,event.cancelBubble=true可以解决问题)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
这对我起作用了
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>
<div onclick="event.stopPropagation();" ...
或者,将事件作为参数传递给内部函数:
<div onclick="someFunction(event);" ...
而在 someFunction 中:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}
由于Karma原因,我无法进行评论,因此我将整个答案写在这里:根据Gareth的答案(var e = arguments [0] || window.event; [... ]),我在onclick上使用了这个单行内联式以进行快速hack:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
我知道现在有点晚,但我想让你知道这个可以在一行中完成。花括号返回一个事件,在两种情况下都附有stopPropagation函数,所以我尝试将它们封装在花括号中,就像在if语句中一样...它可行:)
使用单独的处理程序,例如:
function myOnClickHandler(th){
//say let t=$(th)
}
在 HTML 中,可以这样写:
<...onclick="myOnClickHandler(this); event.stopPropagation();"...>
甚至可以:
function myOnClickHandler(e){
e.stopPropagation();
}
for:
<...onclick="myOnClickHandler(event)"...>