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

【问题标题】：Prevent Default Click button inside anchor防止锚点内的默认单击按钮
【发布时间】：2014-06-20 13:53:10
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery button onclick preventdefault

【解决方案1】：

您需要停止将事件进一步传播到链接元素。现在发生的是两个不同的事件处理程序被触发，因为当您单击该按钮时，它也是对周围锚点的隐式单击。您现在需要防止该事件在 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

【讨论】：

我想我需要修改我的帖子。我的问题是我只希望“.delete_image_btn”触发一个事件。问题是，当我单击垃圾桶时，“delete_image_btn”会触发该事件，但随后会立即触发 FancyBox。我想阻止 FancyBox 触发。
@bagofmilk 是的，我是这样理解的，stopPropagation 在这种情况下应该可以工作。我已经更新了我的描述......
当我使用这段代码时，只有 FancyBox 会触发一个事件。对不起，我仍然很困惑。
@bagofmilk 如果不摆弄代码，我们将无能为力；一个 JSfiddle 会很有帮助。
@bagofmilk 嗯，我不明白为什么，但preventDefault 确实有效：jsfiddle.net/feeela/CWaHL/242

【解决方案2】：

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

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

【讨论】：

这实际上与我想要实现的目标相反。我正在努力做到只有“.delete_image_btn”才会触发一个事件。你所拥有的可以防止“.delete_image_btn”被触发。但是谢谢你，这给了我一个想法

【解决方案3】：

为了防止任何默认事件只是用户

e.preventDefault();

其中，e 代表事件。

【讨论】：