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

有两种方法可以从函数中获取事件对象：

第一个参数，符合W3C标准的浏览器（Chrome，Firefox，Safari，IE9 +）
Internet Explorer中的window.event对象（＆lt; = 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.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
}

Answer 8

根据this page，在IE中你需要：

event.cancelBubble = true

Answer 9

这也有效 - 在链接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;
    }
};

Answer 10

为什么不检查点击了哪个元素？如果单击某个内容，window.event.target将分配给单击的元素和，则单击的元素也可以作为参数传递。

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

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

Answer 11

由于因果关系，我无法发表评论，因此我将其作为一个完整的答案来写：根据Gareth的回答（var e = arguments [0] || window.event; [...]），我在onclick快速破解：

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

我知道已经很晚了，但是我想让您知道这可以在一行中完成。大括号返回在两种情况下都具有stopPropagation-function的事件，因此我尝试将它们封装在大括号中，如在if和...中一样。：）

Answer 12

最好的解决方案是通过javascript函数处理事件，但为了直接通过html元素使用简单快捷的解决方案，并且一旦不赞成使用“ event”和“ window.event”普遍支持（https://developer.mozilla.org/en-US/docs/Web/API/Window/event），建议使用以下“硬代码”：

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

Answer 13

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

Answer 14

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

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

并在html中执行以下操作：

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

甚至：

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

针对：

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

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

14 个答案: