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 ajax服务器端与客户端通信的代码
Mar 28 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
轮播图组件js代码
2016/08/08 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python爬虫实例详解
2018/06/19 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers