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

您有两种选择：

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

在父母的处理程序中，检查父元素是否是事件 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");
    }
});

请注意，那些做两件略有不同的事情。第一个说＆＃34;防止父母看到表单上的点击＆＃34;而第二个说＆＃34;忽略不直接在.parent .container＆＃34;上的点击。当然，要么可以采用不同的目标进行调整。

实例：

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

1 个答案: