在同时使用label和input标签下下label绑定click事件执行两次的问题

初始代码结构如下：

<label :for="index" class="check-label"    @click="handleChexk(item)"><inputtype="checkbox":id="index"class="check-input"v-model="item.isChecked == 1 ? true : false"/><divclass="check-list-name-item">{{name}}</div></label>

结构为lable里嵌套了input标签，并且在lable下绑定了click事件，由此会引发click事件执行两次。经过一番查阅，具体原因如下：

1、首先要了解lable和input标签，官网文档有写明：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

不了解label的,请看：http://www.w3school.com.cn/tags/tag_label.asp

2、从官网文档查阅所知：当label执行click事件时，那么它会传递给input再执行一次同一click事件。从而有执行了两次click事件。

3、解决办法：把事件放在input上，如下图所示。

<label :for="index" class="check-label"    ><input@click="handleChexk(item)"type="checkbox":id="index"class="check-input"v-model="item.isChecked == 1 ? true : false"/><divclass="check-list-name-item">{{name}}</div></label>

网上有很多解决click执行两次的方法，但是情况都不太相同，在不确定原因的情况下，主要还是要一个个方法去试，用排除法。我是最后找到这个方法解决了我的问题。

转载博文出处：label的click()事件执行两次_前台技术-CSDN博客_label vue 点击事件

在同时使用label和input标签下下label绑定click事件执行两次的问题相关推荐

伪标签Pseudo Label 与软标签 soft label
参考: https://www.cnblogs.com/shona/p/13408970.html https://blog.csdn.net/u014297502/article/details/1 ...
php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...
input标签内容改变的触发事件
1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychange事件是实时触发,每增加或 ...
input标签绑定click事件无反应
最开始我写的代码是 $("input[name=insert_files]").click(function(){ alert(1); }); 怎么点击都不会alert,由于inp ...
input 单选框ajax提交,input radio单选框绑定change事件
各种同步方法性能比较(synchronized,ReentrantLock,Atomic) synchronized: 在资源竞争不是很激烈的情况下,偶尔会有同步的情形下,synchronized是很 ...
html下拉框onchange事件,javascript 中select标签上放入onchange事件的两种方式分享
摘要: 下文讲述在html标签select上放入onchange事件的方式分享,如下所示: 例1: maomao365.com js select上直接使用onchange的方法 function s ...
使用WeUI+JS 的label包含input触发两次的问题
在给原生JS中的包含input标签的Label标签绑定点击的事件会触发两次. 因为使用WeUI样式库,所以不能抛弃label标签,使用event.stopPropagation()似乎没有效果,使用r ...
input标签的值只能两位小数_Day51 HTML表格表单标签、flask框架
目录表格标签表单标签 action标签 input标签 select标签 textarea标签 form表单提交文件需要注意 flask框架 1.表格标签 <!DOCTYPE html> ...
php输入框里的提示文字,input标签输入框带提示文字方法
本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家. 方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个 ...

在同时使用label和input标签下下label绑定click事件执行两次的问题

在同时使用label和input标签下下label绑定click事件执行两次的问题相关推荐

最新文章

热门文章