Question

我有一些像这样的HTML：

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

我已经在父Anchor对象上有一些事件。现在我尝试将click事件添加到子span元素，同时禁用父Anchor对象上的click事件。我正在使用jQuery实现这一目标，但我无法理解。我的jQuery代码是这样的：

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

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

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

Answer 1

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

$('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();
    }
});

如何禁用父DOM对象上的单击事件而不禁用其子DOM对象上的单击事件？

1 个答案: