考虑以下几点:

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

我怎么能使它,当用户点击跨度,它不火div的点击事件?


当前回答

使用单独的处理程序,比如:

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

在HTML中这样做:

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

甚至:

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

for:

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

其他回答

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

根据本页,在IE中你需要:

事件。cancelBubble = true

最好的解决方案是通过javascript函数处理事件,但为了使用一个简单而快速的解决方案,直接使用html元素,一旦“事件”和“窗口。(https://developer.mozilla.org/en-US/docs/Web/API/Window/event),我建议使用以下“硬代码”:

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

我也有同样的问题- IE中的js错误框-据我所见,这在所有浏览器中都很好(事件。cancelBubble=true在IE中工作)

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

记住那个窗口。事件在FireFox中不受支持,因此它必须是沿着以下路线的东西:

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