防止锚点内的默认点击按钮

Question

我正在使用FancyBox - ＆gt; jQuery Plugin显示图片库。

这是我试图玩的JSFIDDLE： - ＆gt; http://jsfiddle.net/CWaHL/238/

我希望用户能够删除图像，因此我在缩略图图像的顶部创建了一个按钮。将出现该按钮，并且＆＃34;鼠标悬停＆＃34;：

上的不透明度会发生变化

我可以点击垃圾桶按钮并触发事件（警报）。问题是FancyBox也会在第一个事件发生后立即触发（因为该按钮位于其父锚点内）。

如果我想让它正常工作，我只需要垃圾桶按钮触发一个事件，然后阻止来自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

您需要停止将事件进一步传播到link元素。现在发生的事情是两个不同的事件处理程序被触发，因为当您单击该按钮时，它也是对周围锚点的隐式点击。您现在需要防止该事件冒泡DOM。

您可以使用event.stopPropagation()执行此操作：

$( '.delete_image_btn' ).click( function( event ) {
    event.stopPropagation();
    /* whatever comes next */
} );

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

Answer 2

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

Answer 3

仅阻止用户使用默认事件

e.preventDefault(); 

其中e代表事件。