javascript - 防止 Bootstrap 删除按钮点击传播

Question

如何防止点击从我的删除按钮传播？我正在使用 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>

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