在$（document）.on（...）中使用stopPropagation（）

Question

我会在页面动态中添加一些“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>

结果：

---

活动：

1）我将一些事件绑定到“a”和“i”标签，如下所示：

$(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”消息“在一起。” p>

当我点击“删除”按钮时（当我点击它的孩子时），我想要阻止“a”标记点击事件（父事件）。

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

---

修改 我尝试了一些答案，但他们失败了，结果是这样的：

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

Answer 1

修改

的 jsFiddle Demo 的

我注意到，首先列出的弃用方法实际上在这里不起作用。这是100％正确，抱歉错过了。事实上，这种情况似乎相当复杂！你怎么能从外面设法防止在你的之前发生的点击动作又附加到另一个元素？好吧，我不完全确定“最佳实践”是什么。我想出了这种方法。

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

初始设置

$("#file-1000").click(function(e){
 console.log(e);
 alert("some other click"); 
});

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

如上所述的迭代实现

function ProtectClick(element){
 var handlers = [];
 var elCopy = element;
 do{
  var handler = jQuery._data( elCopy, "events" );
  if( handler != void 0 && handler.click != void 0){
   handlers.push({el: elCopy, handle: handler.click});
  }
  elCopy = elCopy.parentNode;
 }while( elCopy );

 for( var h in handlers ){
  (function(i){
   for( var cur in handlers[i].handle ){
    (function(n){
     var handlerCopy = handlers[i].handle[n].handler;
     var $sourced;
     if( handlers[i].handle[n].selector ){
      $sourced = $(handlers[i].handle[n].selector);
     }else{
      $sourced = $(handlers[i].el);
     }
     handlers[i].handle[n].handler = function(e){
      if( $sourced.is(element) || element != e.target )handlerCopy(e);
     };       
    })(cur);
   }
  })(h);
 }
}

呼叫

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

---

弃用

的 jsFiddle Demo 的

我相信你所寻找的是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();
    });

Answer 2

你可以试试这个

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

e.stopPropagation受到了影响。

美好的一天。