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中为元素加上name属性的方法
May 09 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
详解VUE前端按钮权限控制
Apr 26 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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
json 定义
2008/06/10 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python PIL模块与随机生成中文验证码
2016/02/27 Python
python3操作mysql数据库的方法
2017/06/23 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
浅谈python锁与死锁问题
2020/08/14 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Python解析微信dat文件的方法
2020/11/30 Python
使用Python封装excel操作指南
2021/01/29 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
医药销售自荐书
2014/05/29 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
个性与发展自我评价
2015/03/06 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫