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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
判断用户是否在线的代码
Mar 05 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
JavaScript 巧学巧用
May 23 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP学习 变量使用总结
2011/03/24 PHP
基于php缓存的详解
2013/05/15 PHP
php获取根域名方法汇总
2014/10/28 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python3转换code128条形码的方法
2019/04/17 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
财务总监管理职责范文
2014/03/09 职场文书
投资意向书范本
2014/04/01 职场文书
物业品质提升方案
2014/06/08 职场文书
人事文员岗位职责
2015/02/04 职场文书
个人维稳承诺书
2015/05/04 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python