jQuery取消特定的click事件


Posted in Javascript onFebruary 29, 2016

本文实例讲述了jQuery取消特定的click事件实现方法。分享给大家供大家参考,具体如下:

众所周知, jQuery可以多次绑定同一种事件, 而且绑定的每个事件都可以执行。 问题来了, 在动态生成的DOM中, 我们为某一元素绑定了两种不同的click(假设为A、B), append元素时, 所有元素又绑定一次B, …… 这样会导致最后点击时B事件会成倍往上翻。

幸运的是,jQuery 为我们提供了很优雅的方式, 来取消特定命名空间下的click.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>无标题页</title>
  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      $("#divTest").click(function(){
        alert("正式事件。");
      });
    });
    function bindEvent(){
      for(var i=0;i<3;i++){
        $("#divTest").bind("click.test",function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert("测试事件");
    }
    function ignoreMultiEvent(){
      $("#divTest").unbind("click.test").bind("click.test",function(){
        testEvent();
      });
    }
  </script>
</head>
<body>
  <div id="divTest" style="height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;">
    点我进行测试
  </div>
  <input id="Button2" type="button" value="为上面的DIV绑定3次测试事件" onclick="bindEvent()" />
  <input id="Button1" type="button" value="保留正式事件, 取消已绑定的多次测试事件,再绑定一次测试事件 " onclick="ignoreMultiEvent()" />
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 #Javascript
JS三级可折叠菜单实现方法
Feb 29 #Javascript
精通JavaScript的this关键字
May 28 #Javascript
javascript正则表达式总结
Feb 29 #Javascript
javascript计时器编写过程与实现方法
Feb 29 #Javascript
javascript插件开发的一些感想和心得
Feb 28 #Javascript
详解Javascript中的Object对象
Feb 28 #Javascript
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python @property装饰器原理解析
2020/01/22 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
科室工作的个人自我评价
2013/10/30 职场文书
售后服务承诺函格式
2015/01/21 职场文书
检讨书模板
2015/01/29 职场文书
离婚案件原告代理词
2015/05/23 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android