如何与内联onclick属性停止事件传播?

使用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>

根据这个页面，在IE中你需要:

事件。cancelBubble = true

记住那个窗口。事件在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;
}
}

从函数内部获取事件对象有两种方法:

1. 第一个参数，在w3c兼容的浏览器中(Chrome、Firefox、Safari、IE9+)
2. 窗外。事件对象(<=8)

如果你需要支持不符合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错误框-据我所见，这在所有浏览器中都很好(事件。cancelBubble=true在IE中工作)

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

这也可以工作-在链接HTML使用onclick返回像这样:

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

然后，comfirmClick()函数应该像这样:

function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};

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
}

这对我很有效

<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="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>

为什么不直接检查点击了哪个元素呢?如果你点击某物，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上使用了这个在线内联的快速hack:

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

我知道有点晚了，但我想让你知道，这一行写得很好。大括号返回一个事件，在这两种情况下都附加了stoppropagation -函数，所以我尝试将它们封装在大括号中，如if和....它的工作原理。：）

最好的解决方案是通过javascript函数处理事件，但为了使用一个简单而快速的解决方案，直接使用html元素，一旦“事件”和“窗口。(https://developer.mozilla.org/en-US/docs/Web/API/Window/event)，我建议使用以下“硬代码”:

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>

使用单独的处理程序，比如:

function myOnClickHandler(th){
//say let t=$(th)
}

在HTML中这样做:

<...onclick="myOnClickHandler(this); event.stopPropagation();"...>

甚至:

function myOnClickHandler(e){
e.stopPropagation();
}

:

<...onclick="myOnClickHandler(event)"...>

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也会这样做，所以我甚至没有测试它!)