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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
js获取图片的base64编码并压缩
Dec 05 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应用程序的七个习惯深入分析
2013/06/08 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php截取中文字符串函数实例
2015/02/23 PHP
浅谈php7的重大新特性
2015/10/23 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
英文简历中的自我评价
2013/10/06 职场文书
二手房购房意向书范本
2014/04/01 职场文书
结对共建工作方案
2014/06/02 职场文书
学校清明节活动总结
2014/07/04 职场文书
三峡人家导游词
2015/01/31 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
使用python创建股票的时间序列可视化分析
2022/03/03 Python