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

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”。当然，两者都可以根据不同的目标进行调整。

现场示例：

• 你原来的问题
• 选项1
• 选项 2