如何禁用父 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();
    }
});