在$(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"消息"在一起.

当我单击"删除"按钮时(当我单击它的子项时),我想要阻止"a"标记单击事件(父事件).

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

---

编辑: 我尝试了一些答案,但他们失败了,结果是这样的:

黑框上面是>>一个弹出框,用于显示更大的图片(我想防止打开这个框架)

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