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

考虑以下几点：

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

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

头里面有东西

我如何使它在用户单击span时不会触发

div的click事件？
使用

根据，在IE中，您需要：

event.cancelBubble=true
请记住，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;
    }
}

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

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

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

第一个参数是W3C兼容的浏览器（Chrome、Firefox、Safari、IE9+）
Internet Explorer中的window.event对象（使用此函数，它将测试是否存在正确的方法

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

我在IE中遇到了同样的问题-js错误框-就我所见，这在所有浏览器中都可以正常工作（event.cancelBubble=true在IE中完成这项工作）

这同样有效-在链接HTML中使用onclick和return，如下所示：

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

对于ASP.NET网页（不是MVC），可以使用
Sys.UI.doEvent
对象作为本机事件的包装器

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

这对我有用

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


函数（e）{
var evt=e？e:window.event；
if（evt.stopPropagation）evt.stopPropagation（）；
如果（evt.cancelBubble！=null）evt.cancelBubble=true；
}
另一个舱里有东西

头里面有东西
为什么不检查单击了哪个元素？如果单击了某个对象，
window.event.target
被分配给单击的元素，并且单击的元素也可以作为参数传递

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

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

函数myfunc（el）{
如果（window.event.target==el）{
//行动
}
}
由于因果报应，我无法发表评论，因此我将此作为完整的回答来写：根据Gareth的回答（var e=arguments[0]| | | window.event；[…]），我在onclick上使用了这个一行程序内联，以实现快速破解：

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

。。

我知道已经晚了，但我想让你知道这在一行中是有效的。大括号返回一个事件，在这两种情况下都附加了stopPropagation函数，所以我尝试将它们封装在大括号中，就像在if中一样，并且……它可以工作。
最好的解决方案是通过javascript函数处理事件，但是，为了使用直接使用html元素的简单而快速的解决方案，并且一旦“event”和“window.event”被弃用且不受普遍支持（），我建议使用以下“硬代码”：

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

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

在html中执行以下操作：

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

用于：


FireFox中没有事件对象。事件对象是回调的一个参数。实际上，IE中没有事件对象，因为该对象可以通过window.event访问，而不是作为函数的参数：-）这是错误的-内联onclick处理程序不会将事件作为参数传递。正确的解决方案是下面的Gareths。在Firefox中，您可以访问内联脚本中的变量事件，但window.event不可用<代码>事件

似乎在IOS Safari中的内联事件中也可用。要使其工作，需要这样调用：

它可以是“event | | window.event”。如果（e.cancelBubble）在我看来不正确，如果它在IE中已经为真，则将其设置为真

e.cancelBubble

返回false！无法达到

e.cancelBubble=true指令。使用SoftwareARM的状态来代替！！这不是问题的意思。@jbird这正是问题的意思。这是一种不同的（较旧的）方法来取消dom树中冒泡的事件（在dom api级别1规范中）。@gion_13但用户不需要确认单击的操作。在这个问题中，我们只希望孩子的onclick（）被激发，而不是父母的onclick（）。将用户提示放在这两者之间是没有帮助的。我希望您能看到这种差异。
确认
不相关。我指的是返回值。quote:在链接HTML use onclick with return like THIS中，返回false取消以下链接，它不会取消在我的Chrome上的传播。从内联侦听器，您可以传递事件对象，如：
onclick=“foo（event）”
，然后在函数
函数foo（event）{/*使用event*/}
。这在IE和W3C事件模型中都有效。“小于或等于8”有点……模棱两可。这实际上并没有回答这个问题。另一个问题的简洁答案是：-/谢谢@MSC，这正是我所需要的！内联脚本。它确实回答了这个问题谢谢，伙计，这似乎是这里最干净的解决方案。在另一个注释中，您必须考虑到，只有当元素单击时才匹配实际的最顶层元素。因为看起来在外部div的onclick处理程序中存在字符串引用问题？！
<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>

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

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

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

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

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

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

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