单选多选触发label的两次点击事件，label默认向input分派（dispatch）一次点击事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<template>   <!-- <div class="hello">hi</div> -->   <div>     <label       for="a"       @click="         (e) => {           fun4(e);         }       "       >aaa</label     >     <input       id="a"       type="radio"       @input="         (e) => {           fun1(e);         }       "       @change="         (e) => {           fun2(e);         }       "       @click="fun3()"     />   </div> </template>   <script> export default {   name: "HelloWorld",   props: {     msg: String,   },   data() {     return {};   },   methods: {     fun1(e, data) {       console.log("fun1", e, data);     },     fun2(e, data) {       console.log("fun2", e, data);     },     fun3() {       console.log("fun3");     },     fun4(e, data) {       console.log("fun4", e, data);     },   }, }; </script>   <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

依次触发：

fun4->3->1->2

label并没有包裹input，只是通过for指向了

 如上：发现label只是触发了默认时间，其label本身的click并没有执行两次，那是为什么呢？

原因：input的点击事件并没有冒泡到label上，试试另外一种写法就会有了

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<template>   <!-- <div class="hello">hi</div> -->   <div>     <label       @click="         (e) => {           fun4(e);         }       "       >aaa<input         id="a"         type="radio"         @input="           (e) => {             fun1(e);           }         "         @change="           (e) => {             fun2(e);           }         "         @click="fun3()"     /></label>   </div> </template>   <script> export default {   name: "HelloWorld",   props: {     msg: String,   },   data() {     return {};   },   methods: {     fun1(e, data) {       console.log("fun1", e, data);     },     fun2(e, data) {       console.log("fun2", e, data);     },     fun3() {       console.log("fun3");     },     fun4(e, data) {       console.log("fun4", e, data);     },   }, }; </script>   <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

　　执行顺序：fun4-3-4-1-2

原因：label先执行本身的点击事件，在触发默认时间（可以用prevent阻止），导致input的click触发；再通过事件冒泡（可以用stop阻止），导致label上的click有触发一次