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

77 阅读 0 评论 51 点赞

我是靠谱客的博主魔幻学姐，这篇文章主要介绍在同时使用label和input标签下下label绑定click事件执行两次的问题，现在分享给大家，希望可以做个参考。

初始代码结构如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<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上，如下图所示。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>