javascript - 不允许单击子元素

Question

我有这样的元素

<div class="parent-component">
    <div class="form-group">
        <label for="my-input">Label</label>
        <input type="text" name="my-input" id="my-input" class="form-control">
    </div>
</div>

我已将带有 jQ​​uery on 方法的点击监听器附加到父级，如下所示

$(document).on("click", ".parent-component", function() {
    // ...
})

每当我在 .parent-component 内单击时，事件监听器都会触发。但是，单击输入 - 或任何交互式元素(链接、按钮、输入) - 它就会处于事件状态。

如何防止 .parent-component 中的任何元素被单击，以便我可以在其中包含无法单击的输入和链接？

Answer 1

这通常是理想的行为；单击子元素也是单击其父元素和祖先元素，就像您在浴室里而不在房子里一样。

但是，如果您想防止子/后代点击，您可以这样做:

$(document).on("click", ".parent-component", function(evt) {
    if (!$(evt.target).is('.parent-component')) return false;
    //beyond here, we can be sure the element was to the parent directly,
    //not any children/descendants
})