如何停止具有inline 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>

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

1. 第一个参数,在W3C兼容的浏览器中(chrome、firefox、safari、ie9+)
2. Internet Explorer中的window.event对象(<=8)

如果您需要支持不遵循W3C建议的传统浏览器,通常在函数内部,您将使用如下内容:

function(e) {
  var event = e || window.event;
  [...];
}

它首先检查一个,然后检查另一个,并存储在事件变量中找到的内容。但是,在内联事件处理程序中,没有 e 要使用的对象。在这种情况下,你必须利用 arguments 始终可用并引用传递给函数的完整参数集的集合:

onclick="var event = arguments[0] || window.event; [...]"

但是,一般来说,如果需要停止传播之类的复杂操作,应该避免使用内联事件处理程序。从中长期来看,单独编写事件处理程序并将其附加到元素是更好的主意,无论是可读性还是可维护性。

请记住,firefox不支持window.event,因此它必须符合以下几点:

e.cancelBubble = true

或者,您可以使用火狐的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;
    }
}

使用此函数,将检验是否存在正确的方法。

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;"

这对我有用

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

对于ASP.NET网页(不是MVC),可以使用 Sys.UI.DomEvent 对象作为本机事件的包装。

<div onclick="event.stopPropagation();" ...

或者,将事件作为参数传递给内部函数:

<div onclick="someFunction(event);" ...

在某些功能上:

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

根据 this page ,在IE中,您需要:

event.cancelBubble=真

这同样有效-在链接html中,使用onclick和return,如下所示:

<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;
    }
};

为什么不检查单击了哪个元素?如果你点击某个东西, window.event.target 分配给单击的元素, 和 单击的元素也可以作为参数传递。

如果目标和元素不相等,则是一个向上传播的事件。

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

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