Question

所以我有以下情况：

<div id="block">
Sample text.
<a href="#">Anchor link</a>
</div>

<script type="text/javascript">
    $("#block").click(function() { alert('test'); });
</script>

当我点击div内的任何地方时，我都会收到“测试”警报。但是，当我点击“锚点链接”时，我希望防止这种情况发生。我该如何实现呢？

由于

Answer 1

您可以通过附加处理程序阻止点击从链接冒泡，如下所示：

$("#block a").click(function(e) { e.stopPropagation(); });

我们在评论中讨论的替代方案：

$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); })
           .click(function() { alert('test'); });

这会阻止任何子链接冒泡（好吧，不是真的，但是他们的处理程序不会执行），而是不为每个元素创建一个处理程序，这是通过.stopImmediatePropagation()完成的。

Answer 2

这就是您所需要的：http://api.jquery.com/event.target/。

比较以检查元素是否由您想要的元素或其子元素触发。

Answer 3

您可以使用事件对象的target属性测试单击了哪个节点：

$("#block").click(function(event) { 
    if(event.target.nodeName != 'A') {
        alert('test');
    }
});

我建议阅读Event Properties from quirksmode.org。

Answer 4

$("#block").click(function(event) {
    if($(event.target).attr('id') == $(this).attr('id'))
    {
        alert('test');
    }
});

Answer 5

这是一个带有表单和两个字段的演示（jsfiddle）：

<div id="container">
    <form>
        <div class="field">
            <input id="demo" type="text" name="demo" />
        </div>
        <div class="field">
            <input id="demo2" type="text" name="demo2" />
        </div>
    </form>
</div>

代码如下所示：

$(document).ready(function() {
    $('#container').click(function(evt) {
        if(this == evt.target) {
            console.log('clicked container',evt.target);
            $('#demo').focus();
        } else {
            console.log('clicked child -> ignoring');
        }
    });

    $('.field').click(function(evt) {
        if(this == evt.target) {
            console.log('clicked field div',evt.target);
            $(this).find('input').focus();
        } else {
            console.log('clicked child -> ignoring');
        }
    });
});

您可以单击包含表单的容器，将焦点设置在第一个输入字段上或输入字段后面，以将焦点设置到其中。

如果您点击该字段，则会忽略该点击。

上面的代码有效，因为jQuery在调用事件处理程序之前将DOM节点分配给this，因此您可以通过检查

轻松检查当前事件是否由DOM节点发布。

this == evt.target

CSS：

#container {
    width: 600px;
    height: 600px;
    background: blue;
}

.field {
    background: green;
}

单击子项时如何忽略单击事件

5 个答案: