处理元素上的点击事件，但不处理该元素内链接的点击事件。

Question

如何处理对元素的点击，但不处理该元素内链接的点击？ 假设有以下代码：

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

我希望用户能够点击 .section 以展开/折叠其内容，但如果他们点击该部分内的链接，则不希望发生这种情况。

- A-OK

Answer 1

您可以检查事件目标，并仅在其为

时执行某些操作。以下是一个示例：

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

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

e.target.className !== "section"

这里有一个使用tagName属性的工作示例。

- James Allardice

Answer 2

var $section = $(".section");
$section.click(function(e) {
    if ($(e.target).get(0) == $section.get(0)) {
        alert("expanding...");
    }
});

http://jsfiddle.net/yLMVy/

- Dogbert

Answer 3

$(".section").click(function(e) {
    if($(e.target).is('a')) {
      return;
    }

    // code to expand/collapse section
});

e.target 指向用户单击的元素。因此，该函数检查目标是否为 a 元素。如果是，则直接从函数返回。

- sv_in

Answer 4

在函数结尾处使用return false;

- korywka