javascript - 如何在不禁用其子 DOM 对象上的单击事件的情况下禁用父 DOM 对象上的单击事件？

Question

我有一些这样的 HTML:

<a class="button">
    <span>
        <span>
            <span class="buttonspan">Content</span>
        </span>
    </span>
</a>

我已经在父 Anchor 对象上有一些事件。现在，我正在尝试向子 span 元素添加点击事件，同时禁用父 Anchor 对象上的点击事件。我正在使用 jQuery 来实现这一点，但我想不通。我的 jQuery 代码是这样的:

$('a.button').click(function(event){
    return false;
});

$('.buttonspan').live('click', function(event){
    event.preventDefault();
    event.stopImmediatePropagation();
    // some function
});

如果我执行上面的代码，它也会阻止子元素的点击事件。但是如果我不做第一部分，父点击事件也会被触发。有没有办法在不禁用新添加的子点击事件的情况下禁用父事件？

Answer 1

您可以在父按钮上设置点击事件，并使用事件目标来确定点击了什么并执行必要的操作。

$('a.button').click(function(e) {
    var $target = $(e.target);

    if ($target.is('.buttonspan')) {
        // do actions for the .buttonspan click
    } else {
        // do actions for a click anywhere else inside a.button
        e.preventDefault();
    }
});