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

Question

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS94VmFTWS5qcGcifQ==” alt =“在此处输入图像描述”>

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

我希望用户能够删除图像，所以我在缩略图上方创建了一个按钮。该按钮将出现，并且在“ mouseover”上的不透明度发生变化：]

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS80VXE3bS5qcGcifQ==” alt =“在此处输入图像说明”>

我可以单击垃圾桶按钮并触发一个事件（警报）。问题在于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);
});

我正在使用FancyBox-> jQuery插件来显示图像库。这是我要尝试使用的JSFIDDLE：-> http://jsfiddle.net/CWaHL/238/我希望用户能够删除...

Answer 1

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

Answer 2

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