考虑以下几点:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
我怎么能使它,当用户点击跨度,它不火div的点击事件?
考虑以下几点:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
我怎么能使它,当用户点击跨度,它不火div的点击事件?
当前回答
ASP。NET网页(不是MVC),你可以使用Sys.UI.DomEvent对象作为本机事件的包装器。
<div onclick="event.stopPropagation();" ...
或者,将event作为参数传递给内部函数:
<div onclick="someFunction(event);" ...
在someFunction中:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}
其他回答
记住那个窗口。事件在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;
}
}
这对我很有效
<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>
由于因果关系,我无法评论,所以我把这作为完整的答案:根据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)"...>
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>