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 EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
js数组依据下标删除元素
Apr 14 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
Vue数字输入框组件示例代码详解
Jan 15 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调用shell的方法
2014/11/05 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
pandas series序列转化为星期几的实例
2018/04/11 Python
Python3爬虫学习入门教程
2018/12/11 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
如何基于python测量代码运行时间
2019/12/25 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
异步传递消息系统的作用
2016/05/01 面试题
上班玩游戏检讨书
2014/02/07 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
初中教师业务学习材料
2014/05/12 职场文书
跳槽求职信范文
2014/05/26 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书