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

JavaScript HTML

凯西里

2020-03-24

考虑以下:

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

如何做到这一点,以便当用户单击范围时不会触发div的click事件?

第3329篇《如何使用内联onclick属性停止事件传播?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
西里Near 2020.03.24

这也行得通-在链接HTML中将onclick与return结合使用,如下所示:

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

And then the comfirmClick() function should be like:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};
Gil伽罗小宇宙 2020.03.24

为什么不只检查单击了哪个元素?如果单击某些内容,window.event.target则会将其分配给被单击的元素,并且被单击的元素也可以作为参数传递。

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

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

由于因果关系,我无法发表评论,因此我将其作为一个完整的答案来写:根据Gareth的答案(var e = arguments [0] || window.event; [...]),我在onclick上使用此oneliner内联快速破解:

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

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

凯十三 2020.03.24

根据此页面,在IE中,您需要:

event.cancelBubble = true

JimItachi 2020.03.24

对于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
}
神奇Sam理查德 2020.03.24

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

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

但是,通常来说,如果需要停止传播之类的复杂操作,则应避免使用内联事件处理程序。就可读性和可维护性而言,从中期和长期来看,分别编写事件处理程序并将它们附加到元素是一个更好的主意。

泡芙Pro 2020.03.24

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

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

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

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
小胖Gil 2020.03.24

请记住,FireFox不支持window.event,因此它必须符合以下要求:

e.cancelBubble = true

或者,您可以将W3C标准用于FireFox:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android