javascript 点击事件执行两次js问题

在JQuery中存在unbind()方法先解绑再添加点击事件,解决方案为:

$(".m-layout-setting").unbind('click').click(function(){
//此处填写逻辑代码
})

------

因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失

查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法

e.stopPropagation();

但是发现还是不行
后面查到,off函数可以解除由on函数所绑定的事件所以在js代码中on函数前调用下Off函数,就正常了

$("li.taskli").off('click','a').on('click','a',function(e){ //在on绑定前调用off去除绑定
//$(document).on('click','li.taskli a',function(e) { //原先的写法
console.log("here")
if ($(this).parent().find('div.popover').size()>0)
{
$(this).popover('destroy')
}else{
var uuid = $(this).attr('targetuuid');
var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
$(this).popover({
placement:'bottom',
title:uuid,
html:'true',
content:taskhtml
}).popover('toggle'); getResultFromFile(uuid)
}
e.stopPropagation(); //阻止冒泡
})

解决jquery绑定click事件出现点击一次执行两次问题

问题定位:通过浏览器F12定位到点击一次出现两次调用。

问题复现:

$("#mail_span").on("click",function(){
if($(".treeselect").children(".treeselect-up").css("display")=="none"){
treeSelectClick();
var $up = $(".treeselect").find(".treeselect-up");
$up.css({
display : "block"
});
$("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-top");
}else{
treeSelectClick();
$("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-bottom");
}
}
})

问题解决:

$("#mail_span").on("click",function(e){
if(!e.isPropagationStopped()){//确定stopPropagation是否被调用过
if($(".treeselect1").children(".treeselect-up").css("display")=="none"){
treeSelectClick();
var $up = $(".treeselect1").find(".treeselect-up");
$up.css({
display : "block"
});
$("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-top");
}else{
treeSelectClick();
$("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-bottom");
}
}
e.stopPropagation();//必须要,不然e.isPropagationStopped()无法判断stopPropagation是否调用过
})

查阅资料:

event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了
event.stopPropagation() :阻止事件冒泡,事件是可以冒泡的,为防止事件冒泡到DOM树上,不触发任何前辈元素上的事件处理函数,可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题的更多相关文章

  1. 解决jquery绑定click事件出现点击一次执行两次问题

    问题定位:通过浏览器F12定位到点击一次出现两次调用. 问题复现: $("#mail_span").on("click",function(){        ...

  2. for for in 给已有的li绑定click事件生成新的li也有click事件

    想要给已有的li元素绑定一个click事件,点击生成新的li元素,并且新的li元素也要有click事件 //不能用for循环给每个li绑定click事件 因为这样的话 后面新生成的li就没有click ...

  3. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  4. 查看jquery绑定的事件函数

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...

  5. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  6. ios 设备用jquery live绑定 click 事件不管用

    问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件   2.给需要绑定的标签添加css样式{cursor:pointe ...

  7. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  8. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

  9. google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...

随机推荐

  1. 微信小程序如何添加新的icon图标

    第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss 第 ...

  2. JumpServer部署与管理

    一.JumpServer 堡垒机概述 JumpServer由Python/Django进行开发.使用GNU GPL v2.0开源协议.也是全球首款完全开源的堡垒机.同时配备了业界领先的Web Term ...

  3. 入侵检测基本准则(Basic principles of intrusion detection)【v1.0】

    所谓“入侵检测”,顾名思义,就是对入侵行为的发觉.他通过对计算机网络或计算机系统中若干关键点收集信息并对其进行分析,从中发现网络或系统中是否有违反安全策略的行为和被攻击的迹象.” 但实际上,所谓的“违 ...

  4. 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言).示例输入: fakePars ...

  5. prometheus operator(Kubernetes 集群监控)

    一.Prometheus Operator 介绍 Prometheus Operator 是 CoreOS 开发的基于 Prometheus 的 Kubernetes 监控方案,也可能是目前功能最全面 ...

  6. 高级安全Windows防火墙概述以及最佳实践

    本文简单介绍Windows防火墙的概念,给出使用场景并列出了常见的防火墙操作. 简介 在Windows NT6.0之后微软推出了高级安全Windows防火墙(简称WFAS),高级安全Windows防火 ...

  7. centos7.5下一键安装nginx-1.8.1

    #!/usr/bin/bash #安装依赖软件 yum install -y make cmake gcc gcc-c++ autoconf automake libpng-devel libjpeg ...

  8. C#基础知识学习(1)方法的重写和隐藏

    做了1年多了C#,发现些项目过程中很多基础东西都不是很清晰,基础不够牢固.现在开始复习基础知识并做重点记录 方法需要被重写的时候,可以在方法前加入virtual使方法变成虚方法. 这样我们可以重新写个 ...

  9. KMP算法Next()函数的一个应用

    转载:http://www.cnblogs.com/vongang/archive/2012/05/04/2483419.html 记一个KMP算法的应用,经典的KMP算法详解还是看这里 问题:给一个 ...

  10. centos5,6 系统启动流程

    linux内核特点: 支持模块化:模块文件的名字以.ko(kernel object)结尾 支持内核运行时,动态加载和卸载模块文件. linux内核组成部分: 核心文件:/boot/vmlinuz-V ...