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 数组操作代码集锦
Apr 28 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
javascript this详细介绍
Sep 19 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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作的文本留言本的例子(四)
2006/10/09 PHP
php Static关键字实用方法
2010/06/04 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP中串行化用法示例
2016/11/16 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
利用Psyco提升Python运行速度
2014/12/24 Python
python操作redis的方法
2015/07/07 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
数控个人求职信范文
2014/02/03 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers