防止 Bootstrap 删除按钮单击传播答案

【问题标题】：Preventing Bootstrap delete button click from propagating防止 Bootstrap 删除按钮单击传播
【发布时间】：2014-08-25 22:14:14
【问题描述】：

如何防止点击从我的删除按钮传播？我正在使用 Twitter Bootstrap 3 显示图像轮播，可以选择单击并在模态对话框中显示全尺寸图像，该对话框由幻灯片 div 上的onclick 触发。

问题是我还试图在幻灯片 div 中包含一个删除按钮，并且点击从删除按钮传播到包含 div-这意味着当您尝试删除时，它会弹出CakePHP “你确定吗？”消息，如果您拒绝，则会打开模式。

为什么stopPropagation() 不在这里工作？

<div class="item" onclick="$('show-image').modal('show');" style="background-image:url(blablabla);">
    <div class="carousel-caption" onclick="function handler(event) {event.stopPropagation();}">

    Image caption goes here

    CakePHP framework Javascript delete button goes here (generated in PHP)

    </div>
</div>

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

您的onclick 实际上并没有使用您在其中定义的函数。您可以像这样使其工作（在 IE9+ 和其他现代浏览器上）：

onclick="event.stopPropagation();"

请注意，这不是函数，它是函数的内容。

DOM0 onXyz 处理程序基本上归结为：

theElement.onclick = function(event) {
    // ...your onclick content here
};

所以你可以看到为什么你的代码不能工作：

theElement.onclick = function(event) {
    function handler(event) {event.stopPropagation();}
};

但是当您使用 jQuery 时，最好不要使用 onXyz 属性，而是以现代方式连接您的处理程序：

$(".carousel-caption").on("click", function(e) {
    e.stopPropagation();
    // do your thing here
});

【讨论】：

【解决方案2】：

stopPropagation 在您的代码中不起作用的原因是因为onclick="function(e){}" 没有做任何事情，它只是声明了一个函数并将其丢弃。

这是您想要的通用解决方案：

<div class="parent" onclick="parentClicked();">
    <div class="child" onclick="event.stopPropagation();childClicked();">
    </div>
</div>

window.event 被设置为当前被触发的事件，在本例中为 MouseEvent 对象。

【讨论】：