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使用cookie
Feb 02 Javascript
javascript[js]获取url参数的代码
Oct 17 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
浅析从vue源码看观察者模式
Jan 29 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php实现微信支付之企业付款
2018/05/30 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
python版飞机大战代码分享
2018/11/20 Python
python压包的概念及实例详解
2021/02/17 Python
如何整合JQuery和Prototype
2014/01/31 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
求职自荐信范文格式
2013/11/29 职场文书
食品安全检查制度
2014/02/03 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
挂职学习心得体会
2014/09/09 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
投资申请报告
2015/05/19 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技