Question

我想将父元素的click事件转发给它的子输入元素。我的问题是，如果单击发生在父元素和输入上，则单击会被触发两次，实际上是检查并立即取消选中复选框。这是我的HTML：

<div class="parent-element js-inputhit">
   <input type="checkbox" name="somename" value="somevalue">
</div>

这是我的jQuery：

// Make input elements hit box include the parent container
$('.js-inputhit').click(function() {
    $(this).find(':input').click();
});
$('.js-inputhit :input').click(function(e) {
    e.stopPropagation();
});

如果点击实际上是两个元素，如何停止点击事件？

Answer 1

我想我找到了一个问题的答案。我会将其标记为已回答，但如果有人认为这是错误的方法，请发表评论。

我使用event.target检查它的值是否为.js-inputhit类，如果是，则运行我的代码。这对我有用：

// Make input elements hit box include the parent container
$('.js-inputhit').click(function() {
    if (this === event.target) {
        $(this).find(':input').click();
    }
});
$('.js-inputhit :input').click(function(e) {
    e.stopPropagation();
});

将单击事件转发到子输入，但不要单击两次

1 个答案: