Question

如果input内有label，为什么句子中的每个字都会触发点击事件？

以下是 jsFiddle 的示例。无论你在第一句话中点击什么词，事件都会被触发。

我在input上添加了一些CSS，因此您可以看到无论您在鼠标悬停的第一个标签中的哪个位置，就像您将鼠标悬停在输入上一样。我还使用a内的label标记添加了第二个标签，其工作原理与我期望的input一样有效（单击此处的单词时，点击事件不会触发标签）。

<label>Click <input type="submit" value="here" /> to go somewhere.</label>
<label>Click <a href="#">here</a> to go somewhere else.</label>

$('input, a').click(function() {
    alert('Clicked');
});

我的两个问题是：

有没有办法在input中使用label以label不会触发点击事件的方式？
在我的例子中，为什么click事件会触发句子中的每个单词？

Answer 1

这是HTML规范的一部分 - label元素会增加相关input的命中区域。您可以自己处理点击和preventDefault()，但不会在点击时停止按钮UI更改。

$('input, a').click(function() {
    alert('Clicked');
});

$('label').click(function(e) {
    e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Click <input type="submit" value="here" /> to go somewhere.</label>
<label>Click <a href="#">here</a> to go somewhere else.</label>

或者，您可以使用适当的样式将label元素更改为span，使其行为方式相同，但会损害用户体验。

为什么输入中的标签会触发单击事件

1 个答案: