考虑以下几点:

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

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


当前回答

这也可以工作-在链接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;
    }
};

其他回答

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

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

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

这对我很有效

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