jquery - 防止 anchor 内的默认单击按钮

Question

我正在使用 FancyBox --> jQuery Plugin显示图片库。

这是我正在尝试使用的 JSFIDDLE: --> http://jsfiddle.net/CWaHL/238/

我希望用户能够删除图像，因此我在缩略图顶部创建了一个按钮。 “鼠标悬停”时按钮将出现并且不透明度发生变化:

我可以单击垃圾桶按钮并触发事件(警报)。问题是 FancyBox 也会在第一个事件后立即触发(因为按钮位于其父 anchor 内)。

如果我希望它正常工作，我只需要让垃圾桶按钮触发一个事件，然后阻止来自 FancyBox 的任何事件。

这是我的 HTML:

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="[path to main image]"> 
   <button class="btn btn-danger btn-icon delete_image_btn">
        <i class='fa fa-trash-o'></i>
   </button>
   <img src="[path to thumbnail]" alt="" class='tip' data-placement='top' title='oldman, robot, dance'>
</a>

一些 jQuery:

$('.fancybox-thumbs').on('mouseover',function() {
   $(this).children('img').css('opacity', '0.2');
   $(this).children('button').css('display','block').css('opacity','1');
});

$('.fancybox-thumbs').on('mouseout',function() {
   $(this).children('img').css('opacity', '1');
   $(this).children('button').css('display','none');
});


// My failed attempt to prevent default click
$('.delete_image_btn').click(function() {
   alert('sup');
   $(this).parent('.fancybox-thumbs').prop('onclick', null);
});

Answer 1

e.stopPropagation(); - 它将停止事件的传播，但不会停止触发事件的发生。因此，根据问题 e.preventDefault(); 将有所帮助，因为它将停止触发事件的默认操作。

$('.delete_image_btn').click(function(e) {
   e.preventDefault();
});