div里面有label标签的话, div上的事件为什么会触发2次?

Question

环境vue2复现:https://jsfiddle.net/_russell...(点击'是否开启')请问为什么input会触发绑定在div上的事件?今天一看才发现自己之前问题描述有毛病,怪不得大家都在回答冒泡/和label关联input, 其实当时应该问为什么会触发2次click事件问题已经解决, 就是阻止input继续向上冒泡, 但是下面的问题依然是一头雾水通过1楼的回答已经知道为什么会触发2次, 但是问题到这产生一个疑问就是, 为什么label产生的click input会冒泡到div(而不是到label停止), 触发了div上的绑定的click事件, 有正式的文档说明吗

Answer 1

你点击div时，如果是点击label的那部分，由于input在label里面，就和label关联在一起，相当于给了input一个click事件，通过事件冒泡又触发了一次div的click，只有在点击label的时候才会这样触发，要解决就阻止浏览器的默认行为@click.prevent="click"，让点击label不触发input的点击