3

我会在我的页面中动态添加一些“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(....) 方法中使用它。

编辑： 我尝试了一些答案，但他们失败了，结果是这样的： 在此处输入图像描述

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

4

2 回答 2

5

编辑

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();
    });
于 2013-04-26T18:40:32.457 回答
0

你可以试试这个

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

e.stopPropagation 被弹出。

愉快的一天。

于 2014-03-06T21:06:59.600 回答