zoukankan      html  css  js  c++  java
  • label点击事件重复调用原因与解决办法

     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点击事件重复执行的完美解决方法

  • 相关阅读:
    POJ 1751 Highways (kruskal)
    POJ 2031 Building a Space Station
    UVA 624
    POJ 1502 MPI Maelstrom (Dijkstra)
    POJ 3259 Wormholes(SPFA判负环)
    HZAU 1199 Little Red Riding Hood(水DP)
    HZAU 1205 Sequence Number(最大值前后缀 +双指针 + 二分)
    HZAU 1209 Deadline (hash 贪心 水题不水)
    STL完整版整理
    set集合完整版整理
  • 原文地址:https://www.cnblogs.com/shiddong/p/6021694.html
Copyright © 2011-2022 走看看