jQuery实现获取绑定自定义事件元素的方法


Posted in Javascript onDecember 02, 2015

本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考,具体如下:

(function ($) { // 自定义itemtab事件
$.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法,用来截获绑定自定义事件的元素
 if(typeof types == 'string' && 'itemtab' == types) {
 var itemTouchStart = -1; // touchstart位置
 var itemTouchMove = -1; // touchend位置,值为-1时表示未触发
 var itemTriggerDistance = 0; // 拖动距离阀值,若大于该值则为拖动列表,若小于等于该值则为点击列表项
 var itemMoved = false; // 列表是否为拖动状态
 $(this).bind('touchstart', function (event) {
  if(!event.originalEvent.touches.length) return true;
  itemMoved = false;
  itemTouchStart = event.originalEvent.touches[0].pageX; // 记录起始位置
 }).bind('touchmove', function (event) {
  if(!event.originalEvent.touches.length) return true;
  itemTouchMove = event.originalEvent.touches[0].pageX; // 当前拖动位置
  //console.log('touchmove:', itemTouchStart, itemTouchMove, itemMoved);
  if(Math.abs(itemTouchMove - itemTouchStart) > itemTriggerDistance) {
  itemMoved = true; // 列表被拖动
  }
 }).bind('touchend', function (event) {
  //console.log('itemMoved:', itemMoved);
  if(itemMoved) { // 列表被拖动过,非点击操作
  return true;
  }
  $(this).trigger('itemtab'); // 触发自定义事件
 });
 }
 return this.on( types, null, data, fn ); // 这种做法具有侵入性,多个类似的代码会相互覆盖,可采用深度复制方式调用原$.fn.bind方法
}
})(jQuery);

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js function使用心得
May 10 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
JS折半插入排序算法实例
Dec 02 #Javascript
如何动态加载外部Javascript文件
Dec 02 #Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 #Javascript
JavaScript如何禁止Backspace键
Dec 02 #Javascript
js文本框输入内容智能提示效果
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 #Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 #Javascript
You might like
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
node获取客户端ip功能简单示例
2019/08/24 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
会计专业个人求职信范文
2014/01/08 职场文书
公司面试感谢信
2014/02/01 职场文书
婚礼主持结束词
2014/03/13 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
小学英语课后反思
2014/04/26 职场文书
护理专业自荐书
2014/06/04 职场文书
个人授权委托书
2014/09/15 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
同意转租证明
2015/06/24 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python