如何使用内联onclick属性停止事件传播？

Question

考虑以下:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

如何才能使用户点击跨度时,它不会触发div点击事件？

Answer 1

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

Answer 2

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

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; [...]"

但是,一般来说,如果你需要处理像停止传播这样复杂的事情,你应该避免使用内联事件处理程序.分别编写事件处理程序并将它们附加到元素是中长期更好的想法,无论是为了可读性还是可维护性.

Answer 3

请记住,FireFox不支持window.event,因此它必须是以下内容:

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

Answer 4

使用此功能,它将测试是否存在正确的方法.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

Answer 5

我有同样的问题 - IE中的js错误框 - 就我所见,这在所有浏览器中都能正常工作(event.cancelBubble = true可以在IE中完成工作)

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

Answer 6

这对我有用

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

Answer 7

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

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

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

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

在某些功能:

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

Answer 8

由于业力，我无法发表评论，所以我将其写成完整的答案：根据 Gareth (var e = arguments[0] || window.event; [...]) 的回答，我在 onclick 上使用了此 oneliner inline for a快速破解：

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

我知道现在已经晚了，但我想让你知道这在一行中有效。大括号返回一个事件，该事件在两种情况下都附加了 stopPropagation 函数，因此我尝试将它们封装在大括号中，例如 if 和....它可以工作。:)

Answer 9

使用单独的处理程序，例如：

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

并在 html 中执行以下操作：

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

甚至 ：

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

为了：

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

Answer 10

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

event.cancelBubble = true