避免在 <a href=""> 元素上使用 jQuery 单击功能 [重复]答案

【问题标题】：Avoid jQuery click function on <a href=""> elements [duplicate]避免在 <a href=""> 元素上使用 jQuery 单击功能 [重复]
【发布时间】：2014-02-24 08:09:10
【问题描述】：

我在 div 元素上确实有以下点击功能。 div 元素内部是链接。如何停止此链接上的点击功能？我试过 z-index 但它不起作用。

$('.thumb.flip').click(function () {
 if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
     $(this).find('.thumb-wrapper').removeClass('flipIt');
 } else {
     $(this).find('.thumb-wrapper').addClass('flipIt');
 }
});

【问题讨论】：

这个已经回答了：stackoverflow.com/questions/5085584/…

标签： javascript jquery css

【解决方案1】：

添加代码以阻止点击从 DOM 的链接传播到 div：

$('a').click(function(e){e.stopPropagation();})

见http://api.jquery.com/event.stoppropagation/

jsFiddle example

【讨论】：

【解决方案2】：

试试e.preventDefault()

$('.thumb.flip').click(function (e) {
    e.preventDefault();
    if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
        $(this).find('.thumb-wrapper').removeClass('flipIt');
    } else {
        $(this).find('.thumb-wrapper').addClass('flipIt');
    }
});

【讨论】：

【解决方案3】：

捕获事件对象：

$('.thumb.flip').click(function (evt) {

测试一下点击了哪种元素：

if (evt.target.tagName.toLowerCase() === "a") {
    return true;
}

【讨论】：

【解决方案4】：

使用鼠标按下事件并在您的处理程序中调用 event.stopPropagation() 和 event.preventDefault();

【讨论】：

【解决方案5】：

如果点击目标是 a 则返回 false 否则执行正常操作...

$('.thumb.flip').click(function (e) {
    if ($(e.target).is('a')) {
        return false;
    }
});

z-index 不会做任何事情，但是如果您想阻止来自 css 的点击，您可以将 pointer-events 属性添加到链接并设置值 none。这将禁用链接上的所有类型的事件。

【讨论】：

【解决方案6】：

$('.thumb.flip').click(function (e) {
    if (e.target.nodeName==="A") {  //if target is an anchor, ignore
        return;
    }
    $(this).find('.thumb-wrapper').toggleClass('flipIt')  //toggle class
});

【讨论】：

【解决方案7】：

如果您可以编辑标记，请执行以下操作：

<a href="javascript:void(0);" ></a>

【讨论】：