Question

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

问题在于我还尝试在幻灯片div中包含一个删除按钮，并且点击正在从删除按钮传播到包含div - 这意味着当您尝试删除时，它会被删除。 ll弹出CakePHP＆＃34;你确定吗？＆＃34;消息，如果你说不，那么模态就会打开。

为什么没有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>

Answer 1

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

以下是您想要的一般解决方案：

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

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

Answer 2

您的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
});

防止Bootstrap删除按钮单击传播

2 个答案: