考虑以下几点:
<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
}
其他回答
Event.preventDefault()
是目前的标准,也是对我有效的一种方法。参见:https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
<button value=login onclick="login(event)">login</button>
//and in a script tag
function login(ev){
ev.preventDefault()
return false;
}
这在最新的Chrome、Opera和IE中都有效。(Mozilla页面显示Firefox也会这样做,所以我甚至没有测试它!)
从函数内部获取事件对象有两种方法:
第一个参数,在w3c兼容的浏览器中(Chrome、Firefox、Safari、IE9+) 窗外。Internet Explorer中的事件对象(<=8)
如果你需要支持不符合W3C推荐标准的旧浏览器,一般在函数中你会使用如下代码:
function(e) {
var event = e || window.event;
[...];
}
这将检查第一个,然后是另一个,并存储在事件变量中找到的任何一个。然而,在内联事件处理程序中,没有e对象可以使用。在这种情况下,你必须利用arguments集合,它总是可用的,并引用传递给函数的完整参数集:
onclick="var event = arguments[0] || window.event; [...]"
但是,一般来说,如果需要处理像停止传播这样复杂的事情,就应该避免使用内联事件处理程序。从中期和长期来看,单独编写事件处理程序并将它们附加到元素上是一个更好的想法,这对可读性和可维护性都有好处。
使用event.stopPropagation()。
<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>
由于因果关系,我无法评论,所以我把这作为完整的答案:根据Gareth的答案(var e = arguments[0] || window.event;[…])我在onclick上使用了这个在线内联的快速hack:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
我知道有点晚了,但我想让你知道,这一行写得很好。大括号返回一个事件,在这两种情况下都附加了stoppropagation -函数,所以我尝试将它们封装在大括号中,如if和....它的工作原理。:)
这对我很有效
<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>