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 相关文章推荐
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
使用Ajax实现进度条的绘制
Apr 07 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代码
2010/02/16 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python代码实现KNN算法
2017/12/20 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
学生实习介绍信
2014/01/15 职场文书
海飞丝广告词
2014/03/20 职场文书
采购意向书范本
2014/03/31 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
工作证明格式及范本
2014/09/12 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
创先争优宣传标语
2014/10/08 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python