9

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

这是一个jsFiddle示例。无论您在第一句话中单击哪个单词，都会触发该事件。

我在上添加了一些 CSS，input因此您可以看到，无论您将鼠标悬停在第一个标签的哪个位置，就像您将鼠标悬停在输入上一样。我还使用其中的标签添加了第二个标签，该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');
});

我的两个问题是：

  1. 有没有办法以不触发点击事件的方式使用input内部 a ？labellabel
  2. 在我的示例中，为什么单击事件会在句子中的每个单词上触发？
4

1 回答 1

15

这与 HTML spec- labelelements 增加命中区域的一部分有关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使它们的行为方式相同，尽管您会损害用户的体验。

于 2013-10-08T13:38:54.637 回答