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

user21398 发表于 Dev

用户名

我希望能够单击父div，但是让子窗体和锚元素不受click事件的影响。

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

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

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

TJ人群

您有两种选择：

将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);

在父级的处理程序中，检查父级元素是否是事件（）的来源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”。当然，任何一种都可以适应不同的目标。

现场示例：

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。