Question

我在div元素上有以下click函数。 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');
 }
});

Answer 1

尝试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');
    }
});

Answer 2

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

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

请参阅http://api.jquery.com/event.stoppropagation/

<强> jsFiddle example

Answer 3

捕获事件对象：

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

测试以查看点击了哪种元素：

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

Answer 4

使用鼠标按下事件并在处理程序中调用event.stopPropagation（）和event.preventDefault（）;

Answer 5

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

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

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

Answer 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
});

Answer 7

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

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

避免<a href=""> elements</a>上的jQuery点击功能

7 个答案: