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

 更新时间:2015年12月02日 16:33:28   作者:lsjlnd  
这篇文章主要介绍了jQuery实现获取绑定自定义事件元素的方法,涉及jQuery方法重载、事件绑定及元素操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • jquery html动态生成select标签出问题的解决方法

    jquery html动态生成select标签出问题的解决方法

    用jquery,json从后台获取一个列表,然后用一个动态生成的select标签显示出来,结果出现错误,下面为大家分享个不错的解决方法,喜欢的朋友可以参考下
    2013-11-11
  • jquery eval解析JSON中的注意点介绍

    jquery eval解析JSON中的注意点介绍

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:使用eval()函数、使用Function对象来进行返回解析,下面有个示例,感兴趣的朋友可以参考下
    2013-08-08
  • jQuery实现左右滑动的toggle方法

    jQuery实现左右滑动的toggle方法

    下面小编就为大家分享一篇jQuery实现左右滑动的toggle方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • jQuery实现id模糊查询的小例子

    jQuery实现id模糊查询的小例子

    在js中常常会用到某类似id的模糊查询,可以使用jquery工具和模糊查询"^",来实现。下面用另个例子说明
    2013-03-03
  • jquery实现户籍地选择下拉框

    jquery实现户籍地选择下拉框

    这篇文章主要为大家详细介绍了jquery实现户籍地选择下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • jquery ajax请求实例深入解析

    jquery ajax请求实例深入解析

    jquery中封装了一些ajax请求的方法,很实用,本文将以此引入一个实例,对jquery中ajax请求的方法进行详细介绍,需要了解更多的朋友可以参考下
    2012-11-11
  • jquery简单瀑布流实现原理及ie8下测试代码

    jquery简单瀑布流实现原理及ie8下测试代码

    可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度;测试环境:ie8 ff13.0.1 chrome22有兴趣的朋友可以了解下
    2013-01-01
  • jQuery Ajax Post 回调函数不执行问题的解决方法

    jQuery Ajax Post 回调函数不执行问题的解决方法

    本文是小编给大家带来的jQuery Ajax Post 回调函数不执行的原因及解决方法,在本文最下面还给大家附加jquery Ajax 不执行回调函数success的原因,这两个问题都非常多见,感兴趣的朋友一起看下吧
    2016-08-08
  • jquery如何实现在加载完iframe的内容后再进行操作

    jquery如何实现在加载完iframe的内容后再进行操作

    怎么实现在加载完iframe的内容后才进行下一步操作,通过jquery可以实现,为iframe添加onload事件,具体如下,喜欢的朋友不妨参考下或许对大家有所帮助
    2013-09-09
  • Jquery事件的连接使用示例

    Jquery事件的连接使用示例

    本文以展开图片和收缩图片为例为大家介绍下Jquery事件的连接的使用方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-06-06

最新评论