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插件jSignature实现手动签名
May 04 Javascript
Position属性之relative用法
Dec 14 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
JS触摸与手势事件详解
May 09 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
python切片及sys.argv[]用法详解
2018/05/25 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python同步windows和linux文件
2019/08/29 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
好的促销活动方案
2014/08/21 职场文书
丧事答谢词
2015/01/05 职场文书
微信搭讪开场白
2015/05/28 职场文书
运动员加油词
2015/07/18 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏