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

Question

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

<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");
});   

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

如何让父点击事件只发生在子表单和 anchor 标签之外的元素上？父点击事件可以覆盖除这两个元素之外的任何其他子元素。

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. 在父元素的处理程序中，检查父元素是否是作为事件 source 的元素 (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