jquery - 为什么输入中的标签会触发点击事件

Question

如果我在 label 中有一个 input，为什么句子中的每个单词都会触发点击事件？

这是一个 jsFiddle 举个例子。无论您点击第一句话中的哪个词，都会触发该事件。

我在 input 上添加了一些 CSS，这样您就可以看到，无论您将鼠标悬停在第一个标签的哪个位置，都像是将鼠标悬停在输入上。我还在 label 中使用 a 标签添加了第二个标签，它的工作方式与我期望的 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');
});

我的两个问题是:

1. 有没有办法在 label 中使用 input 而 label 不会触发点击事件？<
2. 在我的示例中，为什么点击事件会在句子中的每个单词上触发？

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 以使它们的行为方式相同，尽管您会损害用户体验。