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

Question

如果我有一个input内部a label,为什么句子中的每个单词都会触发click事件？

这是一个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. 有没有办法在不触发click事件的方式中使用input内部a ？labellabel
2. 在我的例子中,为什么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为使其行为方式相同,但会损害用户的体验.