el-radio控件click事件触发两次的解决办法

radio

methods: {
    handleClick(el) {
        alert('点击')
   }
 }

问题:发现点击事件被触发了两次。

原因:elementui中,el-radio控件包含了label和input标签,在el-radio上设置了点击事件,让两个标签都拥有了该事件,所有click方法被调用了2次。

解决办法

方法1.  增加prevent修饰符阻止事件传递

radio

方法2. 因为都触发了input标签和label标签的点击事件,可以通过对应事件的标签作加判断阻止其中一个就可以了。

 methods: {
   handleClick(el) {
        // 当是input标签触发的点击事件时,阻止该事件
        if (el.target.tagName === 'INPUT') return
        alert('点击')
   }
 }

你可能感兴趣的:(java,javascript,前端)