label点击事件重复调用原因与解决办法

Posted 2020-08-17 3尺尘沙

 label>input结构，再给label绑定点击事件，会导致点击时执行2次点击事件的现象。比如下面的代码：

<div class="radio">

　　<label>

　　　　<input type="radio" ng-click="func($event)" id="ue" >

　　　　编辑器模式

　　</label>

</div>

<div class="radio">

　　<label ng-click="func($event)">

　　　　<input type="radio" id="ue" >

　　　　markdown模式

　　</label>

</div>

第一个label的点击事件绑定在input上，第二个label的点击事件就绑定在label上。我们在点击事件中加入$event，在处理函数中console.log(event.target.nodeName)就可以看到当前处理的点击对象：

$scope.func = function（event）{

　　console.log(event);

　　console.log(event.target.nodeName);

}

 以下是运行结果：

x.Event {originalEvent: MouseEvent, type: "click", timeStamp: 2471.9950000000003, jQuery1102011296329610750422: true, toElement: input#ue.ng-pristine.ng-valid…}
INPUT

x.Event {originalEvent: MouseEvent, type: "click", timeStamp: 2669.995, jQuery110206305724952924066: true, toElement: label…}
LABEL
demo.js:5 x.Event {originalEvent: MouseEvent, type: "click", timeStamp: 2669.995, jQuery110206305724952924066: true, toElement: input#md.ng-valid.ng-dirty…}
INPUT

所以当我们把click事件放在label上面就会导致两次调用，点击对象分别是label和input ，所以最简单的处理方法是直接把click事件放在input上。

其他的方法：

（1）可以采用判断点击对象的方法—— 点击对象过滤：

if(event.target.nodeName == ‘INPUT‘) {

　　//TODO

}

(2)通过定位的方法将input标签覆盖label标签，但是可能会导致页面显示异常，以及浏览器的兼容性，不建议。

 

label点击事件重复执行的完美解决方法