标签点击事件如何传递至关联输入框？Angular.js代码运行差异疑问

咱先把两个问题拆开说，先搞懂label的点击是怎么传到输入框的～

一、label点击事件传递到关联input的原理 #

这其实是原生HTML的内置功能，跟Angular.js没半毛钱关系：

• 当你给<label>加了for属性，值刚好对应某个<input>的id时，浏览器会自动给这俩元素建立关联。
• 点击label的瞬间，浏览器会偷偷帮你触发一次关联input的原生click事件——就跟用户直接点了input本身一样。这个设计是HTML标准里规定的，就是为了让表单控件的可点击区域更大，方便用户操作（比如小复选框，点旁边的文字也能选中）。

二、为什么你的第一种写法能正常运行？ #

你的input虽然设了display:none，但它并没有从DOM里消失，浏览器依然能识别它和label的关联。当你点击label时：

1. 浏览器自动触发input的原生click事件
2. Angular的ng-click指令本来就在监听input的click事件，所以一下子就捕获到这个事件，顺理成章执行了ctrl.fnc()

说白了就是：label的点击被浏览器“转译”成了input的点击，而input上的ng-click刚好等着这个事件呢。

三、两种写法的核心差异 #

第一种写法是蹭了HTML原生的事件转发机制，触发的是input的click事件；第二种写法则是直接给button绑定ng-click，依赖button自身的click事件能被正常触发。

你说第二种写法跑不起来，其实正常情况下<button ng-click="ctrl.fnc()">是完全合法的Angular代码，大概率是你的场景里有其他干扰因素：比如button被父元素的事件阻止了冒泡，或者button所在的作用域和ctrl不是同一个，甚至可能是样式导致button被其他元素盖住了、实际点不到。不过既然你暂时不纠结这个，重点就是理解第一种写法是靠原生HTML特性才生效的。

内容的提问来源于stack exchange，提问作者Spitemaster