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

初始代码结构如下：

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

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

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

最后

以上就是魔幻学姐为你收集整理的在同时使用label和input标签下下label绑定click事件执行两次的问题的全部内容，希望文章能够帮你解决在同时使用label和input标签下下label绑定click事件执行两次的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。