父点击事件与子点击事件重叠

Question

我希望能够点击父 div，但让子表单和锚元素免于点击事件。

<div class="root">

    <div class="parent">
        <div class="container">
            <a href="/blah"> Hello World</a>
            <div>
                <span> Hello World Again
            </div>
            <form class="form">
                <label> inputs
                <input id="text" type="text"/>
                <textarea></textarea>
                <input id="submit" type="submit"/>
            </form>
        </div>
    </div>

</div>

jQuery:

$(".parent").on("click", ".container", function() {
    alert("Parent clicked");
});

$(".parent").on("click", "#text", function(event) {
    event.preventDefault();
    alert("Form Input clicked");
});

$(".parent").on("click", "#submit", function(event) {
    event.preventDefault();
    alert("Form Button clicked");
});

 $(".parent").on("click", "a", function(event) {
    event.preventDefault();
    alert("anchor link clicked");
});   

单击任何表单元素（输入、文本区域、按钮提交）或锚标记将不起作用，因为父单击事件正在触发。

如何仅在子表单和锚标记之外的元素上进行父单击事件？父点击事件可以覆盖除这两个元素之外的任何其他子元素。

Answer 1

你有两个选择：

1. 将click 事件挂在相关的子容器上（看起来像是表单）并在处理程序中使用event.stopPropagation()。这将阻止事件冒泡到父级。像这样的：

   // Option 1: Hook on the form and stop
   // propagation (hooking up "false" does an
   // implicit preventDefault + stopPropagation)
   $(".parent").on("click", "form", false);
   

2. 在父处理程序中，检查父元素是否是事件的源元素 (e.target)。如果是，则处理该事件；如果不是，请忽略它，它是在子元素上生成的。像这样的：

   $(".parent").on("click", ".container", function(event) {
       // Option 2: Look at event.target and ignore
       // the event if it originated in a descendant
       // element
       if (this === event.target) {
           alert("Parent clicked");
       }
   });
   

请注意，它们做了两件略有不同的事情。第一个说“防止父母看到表单上的点击”，而第二个说“忽略不直接在.parent .container 上的点击”。当然，两者都可以针对不同的目标进行调整。

活生生的例子：

• Your original problem
• Option 1
• Option 2