Jquery 在（…）上的$（document）

我会在我的页面中动态添加一些“Li”标签

每个“Li”都有如下代码：

<li id="file-1000">
    <a target="_blank" href="pack.jpg" style="display: block;" class="pirobox_gall first last">
       <img alt="" src="pack_thumb.jpg" class="attached">
       <i style="display: none;" class="icon-close2" id="delIcon-1000"></i>
    </a>
</li>

$(document)
    .on('mouseenter',
        '#file-1000',
        function () {
            $('#delIcon-1000').fadeIn(200);
        })
    .on('mouseleave',
        '#file-1000',
        function () {
            $('#delIcon-1000').fadeOut(200);
        })
    .on('click',
        '#delIcon-1000',
        function () {
            alert('Close btn is clicked');
        });

2）另一方面，“a”标记在其单击事件上有其他分配的事件（通过jQuery图像幻灯片插件：piroBox）

---

因此，当我点击图片时，我会看到一个很好的弹出我的图片（大图片），但当我点击删除按钮时，我会看到大图片+“关闭btn”一起被点击“消息”

我希望在单击删除按钮（单击其子项时）时阻止“a”标记单击事件（父事件）。

我知道使用stopPropagation（）是一种解决方案，但它在这里不起作用，我不知道如何在$（document）.on（..）方法中使用它

---

编辑： 我尝试了一些答案，但都失败了，结果如下：

上面的黑色框架是>>一个弹出框，用于显示更大的图片（我想阻止打开此框架）

编辑 我注意到，首先列出的不推荐的方法实际上在这里不起作用。这是100%正确的，很抱歉错过了这一点。事实上，这种情况似乎相当复杂！您如何从外部防止在您之前发生的、也附加到另一个元素的单击操作？嗯，我不是完全确定“最佳实践”是什么。不过我提出了这种方法

从dom树上的元素开始迭代，查找单击事件。收集这些单击事件。迭代收集的所有处理程序，然后如果事件基于您的元素，则重载它们以筛选您的元素

初始设置

如上所述的迭代实现

召唤

---

不赞成

我相信您正在寻找的是

preventDefault

$(document)
.on('mouseenter',
    '#file-1000',
    function () {
        $('#delIcon-1000').fadeIn(200);
    })
.on('mouseleave',
    '#file-1000',
    function () {
        $('#delIcon-1000').fadeOut(200);
    })
.on('click',
    '#delIcon-1000',
    function (e) {
        alert('Close btn is clicked');
        e.preventDefault();
    });

---

你可以试试这个

$('html').on('click', '#file-1000', function(e) {
  e.stopPropagation();
  e.preventDefault();
  alert('Close btn is clicked');
});

e、 停止播放

---

很棒的一天。

你为什么要做

$（“#file-1000”）。选择器

？为什么不仅仅是

“#file-1000”

？是的，你的意见是正确的。我更改了它。你不能停止已传播到文档的事件的传播。（当然可以，但它并没有达到预期效果，因为此时没有任何传播）您需要确保event.target与选择器匹配。@KevinB，我如何覆盖我的“piroBox”的onclick事件“plugin and check event.target？？？如何防止其默认行为？？？我不想修改pirobox插件。我的问题是基于这个问题。（pirobox:）如果pirobox的事件处理直接绑定到元素而不是文档，则不能。（我还没有检查插件，看看它是否真的这样做了，但大多数插件都是这样做的）我认为这在描述的实际情况下不起作用。

preventDefault

只是阻止链接转到它定义的页面。描述的情况是附加了显示较大图像的其他单击处理程序。

preventDefault

不会影响此行为。例如：@JamesMontagne，您的意见是正确的。此代码阻止链接，但图像弹出窗口尚未打开。这不是正确的答案。@JamesMontagne-感谢您指出这一点，我相信我在第一次发布此答案时错过了它。我刚刚发布了一个编辑，可以处理您小提琴的情况（希望还有更一般的情况）.@RAM-当时它是不正确的，请查看编辑后的版本，并告诉我它是否适用于您的情况。@TravisJ，我将在10小时后（在我的工作时间之后）尝试您的新答案。但我必须在哪里使用ProtectClick（$（'#delIcon-1000'）[0]）？？？

ProtectClick($('#delIcon-1000')[0]);

$(document)
.on('mouseenter',
    '#file-1000',
    function () {
        $('#delIcon-1000').fadeIn(200);
    })
.on('mouseleave',
    '#file-1000',
    function () {
        $('#delIcon-1000').fadeOut(200);
    })
.on('click',
    '#delIcon-1000',
    function (e) {
        alert('Close btn is clicked');
        e.preventDefault();
    });

$('html').on('click', '#file-1000', function(e) {
  e.stopPropagation();
  e.preventDefault();
  alert('Close btn is clicked');
});