考虑以下:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
如何做到这一点,以便当用户单击范围时不会触发div
的click事件?
考虑以下:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
如何做到这一点,以便当用户单击范围时不会触发div
的click事件?
为什么不只检查单击了哪个元素?如果单击某些内容,window.event.target
则会将其分配给被单击的元素,并且被单击的元素也可以作为参数传递。
如果目标和元素不相等,则这是一个向上传播的事件。
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" />
由于因果关系,我无法发表评论,因此我将其作为一个完整的答案来写:根据Gareth的答案(var e = arguments [0] || window.event; [...]),我在onclick上使用此oneliner内联快速破解:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
我知道已经很晚了,但我想让您知道这可以一行完成。大括号返回在两种情况下都具有stopPropagation-function的事件,因此我尝试将它们封装在大括号中,例如在if和.... it中。:)
根据此页面,在IE中,您需要:
event.cancelBubble = true
对于ASP.NET网页(不是MVC),可以将Sys.UI.DomEvent
对象用作本机事件的包装。
<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
}
有两种方法可以从函数内部获取事件对象:
如果您需要支持不遵循W3C建议的旧版浏览器,通常在一个函数内,您将使用以下内容:
function(e) {
var event = e || window.event;
[...];
}
它会先检查一个,然后再检查另一个,并存储在事件变量中找到的那个。但是,在嵌入式事件处理程序中,没有e
要使用的对象。在这种情况下,您必须利用arguments
始终可用的集合,并引用传递给函数的完整参数集:
onclick="var event = arguments[0] || window.event; [...]"
但是,通常来说,如果需要停止传播之类的复杂操作,则应避免使用内联事件处理程序。就可读性和可维护性而言,从中期和长期来看,分别编写事件处理程序并将它们附加到元素是一个更好的主意。
使用此功能,它将测试是否存在正确的方法。
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;"
请记住,FireFox不支持window.event,因此它必须符合以下要求:
e.cancelBubble = true
或者,您可以将W3C标准用于FireFox:
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;
}
}
这也行得通-在链接HTML中将onclick与return结合使用,如下所示:
And then the comfirmClick() function should be like: