javascript - 处理对元素的点击，但不处理对该元素内链接的点击

Question

如何处理对元素的点击，而不是对该元素内链接的点击？ 假设我有以下内容

<div class="section">
    Some text blah blah
    <a href="#">Link</a>
</div>
<script>
    $(".section").click(function() {
        // code to expand/collapse section
    });
</script>

而且我希望用户能够单击 .section 以展开/折叠它，但我不希望在他们单击该部分中的链接时发生这种情况。

Answer 1

您可以检查事件目标，只有当它是div 时才执行某些操作。这是一个例子:

$(".section").click(function(e) {
    if(e.target.tagName !== "DIV") {
      //Not the div! 
    }
});

您可以测试 target 的各种属性，例如，如果您有其他子 div 元素，但不想在这些元素上注册点击，您可以使用 className 属性:

e.target.className !== "section"

这是一个working example (使用 tagName 属性)。