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

时间: 2024-10-09 01:12:53

label点击事件重复调用原因与解决办法的相关文章

js新添加的标签,点击事件无效的原因和解决办法

对于新添加的标签应用如下写法会失效: $('.class').on("click",function(){--});相当于: $('.class').bind("click",function(){--});下边的方法会生效: $(document).on("click",'.class',function(){--});相当于: $('.class').live("click",function(){--});新版本的jqu

jquery的on绑定点击事件执行两次的解决办法

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下(其中.tabDel是页面加载之后新生成的元素,故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件): 上网找的解决方法大概有一下两种:1.在用 on 绑定 click 事件之前,对该事件解绑,也就是

给&lt;label&gt;点击事件时, 竟然点击了两次

搜的一方法 给<label>点击事件时, 竟然点击了两次, 所以label包围的input总是被checked或者不checked var evTimeStamp = 0; $(".all-label").on("click",function (e) { //解决label点击会触发两次开始 var now = +new Date(); if (now - evTimeStamp < 100) { return; } evTimeStamp =

jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: function ManageCommentText(text) { var result = text; $.ajax({ data: "get", url: &qu

initialization of &#39;XXX&#39; is skipped by &#39;case&#39; label 原因及解决办法

今天遇到这个问题,在网上看了一会资料后找到原因,即: switch 的 case 中不能定义变量,不然就会报错.可能是变量的初始化会因为有时候case条件不被执行而跳过. 后来想到三个解决的方法: 1:用if else 代替 switch 语句; 2:在case中用{}将代码括起来,这样在{}中就能定义变量了; 3:如果变量在各个case中都要用的话,就把变量定义在switch外面吧; initialization of 'XXX' is skipped by 'case' label 原因及解

mysql数据库死锁的产生原因及解决办法

这篇文章主要介绍了mysql数据库锁的产生原因及解决办法,需要的朋友可以参考下 数据库和操作系统一样,是一个多用户使用的共享资源.当多个用户并发地存取数据 时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性.加锁是实现数据库并 发控制的一个非常重要的技术.在实际应用中经常会遇到的与锁相关的异常情况,当两个事务需要一组有冲突的锁,而不能将事务继续下去的话,就会出现死锁,严 重影响应用的正常执行. 在数据库中有两种基本的锁类型

HttpClient的CircularRedirectException异常原因及解决办法

HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientProtocolException at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:909) at org.apache.http.impl.client.AbstractHttpClie

Android intent 传值不更新的原因和解决办法

当 Activity 的启动模式是 singleTask 或者 singleInstance 的时候.如果使用了 intent 传值,则可能出现 intent 的值无法更新的问题.也就是说每次 intent 接收到的值都是第一次接到的值.因为 intent 没有被更新.想要更新需要做两件事情. 1. 发送方 Activity,加上一句话 ? 1 PendingIntent pendingIntent = PendingIntent.getActivity(context,0,intent,Pen

[转]&quot;error while loading shared libraries: xxx.so.x&quot; 错误的原因和解决办法

[转]"error while loading shared libraries: xxx.so.x" 错误的原因和解决办法 http://blog.csdn.net/sahusoft/article/details/7388617 一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: tmux: error while loading shared libraries: libevent-1.4.so.2: cannot open shared obje