我有一个角度.js的应用程序，由于一些我无法理解的非常奇怪的原因，它有效：
<div>
<input id="foo" style="display:none" ng-click="ctrl.fnc()" />
<label for="foo" style="button-like">Button</label>
</div>
但这不会：
<div>
<button ng-click="ctrl.fnc()">Button</button>
</div>
现在，我不太关心让后者工作(即使它看起来好多了)。 我对可能导致这种情况的原因更加困惑。 MDN 说："当单击或点击 a 并且它与表单控件关联时，也会为关联的控件引发生成的单击事件。 对我来说，这意味着点击事件发生在输入元素上，但不会从那里冒泡，然后原始事件继续冒泡。
但是，单击输入不会运行 ctrl.fnc()，方法是使输入可见或在控制台中对其运行 click()。
正如我所说，我不需要解决方案——我没有时间尝试搜索最小的例子。 如果有人能弄清楚是什么原因导致 angular 表现得像这样，那将是一个有趣的奖励，但大多数情况下，我只想知道点击输入的行为如何与点击其相关标签的行为不同。
在基本的HTML中，<label>上的点击事件被冒泡到其关联的<input>与<input id="foo">和<label for="foo">链接。
document.querySelector('input').addEventListener('click', () => console.log('hello'));<label for="foo">Label</label>
<input id="foo" />这与Angular无关。这是HTML的一个基本方面，也是元素之间的一种特殊情况。单击事件将通过单击输入或标签来触发。
从本质上讲，label.click()称其关联input.click().这实质上创建了两个不同的事件。
你也可以看到这个为每个父元素触发。如果单击标签，您将看到label > form > div和input > form > div。
document.querySelector('div').addEventListener('click', () => console.log('div'));
document.querySelector('form').addEventListener('click', () => console.log('form'));
document.querySelector('input').addEventListener('click', () => console.log('input'));
document.querySelector('label').addEventListener('click', () => console.log('label'));<div>
<form>
<label for="foo">Label</label>
<input id="foo">
</form>
</div>有你的问题尝试玩id="foo"，for=foo这两者通过HTML关系链接。
希望这能消除您的困惑。
这与Angular无关。