阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.finger 中文 API 文档

      插件 jQuery.finger 中文 API 文档 https://github.com/ngryman/jquery.finger

      抑制触摸屏交互的 300ms 延迟 :

      用于检查哪些“技巧”用于抑制可怕的 300ms 延迟(用于触摸事件,touchend 兼容鼠标事件,包括 click; 用于指针事件,之前 click)的小系列测试实际上适用于各种浏览器 / 操作系统。在已知的情况下,这还包括添加支持的特定版本的浏览器,参考相关的错误 / 公告。空白单元意味着特定的技巧 / 技术没有效果,并且 300ms 延迟仍然存在。(注意,确切地说,在 iOS 上,延迟实际上是 350 毫秒)

      具体查看:https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay

      jQuery.finger

      手指通过移除触摸设备上的 300 毫秒延迟来统一点击和触摸事件。它还提供了一组常用的事件来处理基本手势,如轻弹,拖动,按下和双击。 非常小(<0.5kb gzipped),它专注于性能和 KISS,经过充分测试,并且还支持 jQuery 委托事件。

      <script src="jquery.js"></script>
      <script src="dist/jquery.finger.min.js"></script>
      <script>
        // direct event
        $('.touchme').on('tap', function() {
          console.log('direct');
        });
      
        // delegated event
        $('body').on('tap', '.touchme', function() {
          console.log('delegated');
        });
      });
      </script>
      

      阈值

      您可以通过修改对象中找到的阈值来调整 Finger 如何处理事件 $.Finger。

      pressDuration

      这是用户为了发起 press 事件而必须持有的时间。如果未达到此时间,tap 则会触发事件。默认为 300ms。

      doubleTapInterval

      这是 tap 触发 doubletap 事件的两个事件之间的最长时间。如果达到此时间,tap 则将触发两个不同的事件。默认为 300ms。

      flickDuration

      这是用户为了触发 flick 事件而必须滑动的最长时间。如果达到此时间,则仅 drag 会继续触发事件。默认为 150ms。

      motionThreshold

      这是用户为了发射动作事件(拖动或轻弹)必须移动的像素数。如果未达到此时间,则不会处理任何动作 tap,doubletap 或者 press 将触发事件。默认为 5px。

      其他事件参数

      当有动作(拖动和轻弹)时,手指会增强默认事件对象。它提供有关指针位置和运动的信息:

      • x:x 页面坐标。
      • y:y 页面坐标。
      • dx:自上次事件以来的此 x 增量(移动的像素数量)。
      • dy:y 自上次事件以来的这个 delta。
      • adx:x 自上次事件以来的绝对增量。
      • ady:y 自上次事件以来的绝对增量。
      • 方向:
        • horizontal:运动被检测为水平运动。这可以调整$.Finger.motionThreshold
        • vertical:运动被检测为垂直运动。这可以调整$.Finger.motionThreshold
      • 方向:
        • 1:运动具有正方向,从左到右为水平,或从上到下为垂直。
        • -1:运动具有负方向,从右到左为水平,或从下到上为垂直。
      • 结束:true 如果动作停止了,否则 false。

      防止默认行为

      有三种方法可以防止默认行为。

      在全球范围内

      您可以全局阻止所有本机行为:

      $.Finger.preventDefault = true;

      特别

      您可以像任何其他标准事件一样阻止默认行为:

      $('body').on('tap', '.touchme', function(e) {
      	// ...
      	e.preventDefault();
      });
      

      请注意,如果在同一元素上绑定多个相同类型的事件,并且其中一个事件阻止了默认值,则该事件的每个触发器都将隐式阻止其他绑定事件的默认值。

      新闻事件只能在全球范围内进行,而不是具体。

      原创活动

      内部手指绑定全局 touch/ mouse 事件以履行其职责。客人可以通过酒店进入这一原生活动 e.originalEvent。这是一个共享事件,这意味着这将是所有处理程序中的同一个对象。

      通过此原始事件,您可以通过在任何处理程序中添加任何逻辑来决定如何防止默认行为。

      这是一个关于如何防止水平滚动但不是垂直滚动的示例:

      $('body').on('drag', '.drag', function(e) {
      	// let the default vertical scrolling happen
      	if ('vertical' == e.orientation) return;
      
      	// prevent default horizontal scrolling
      	e.preventDefault();
      });
      

      例子

      删除页面每个链接上的 300 毫秒延迟

      $('body').on('tap', 'a', function(e) {
      	window.location = $(this).attr('href');
      	e.preventDefault();
      });
      

      动态加载元素(AJAX)的委托事件:

      $('body').on('tap', '.toggle', function() {
      	$(this).toggleClass('is-selected');
      });
      

      滑动以显示

      $('#menu').on('flick', function(e) {
      	if ('horizontal' == e.orientation) {
      		if (1 == e.direction) {
      			$(this).addClass('is-opened');
      		}
      		else {
      			$(this).removeClass('is-opened');
      		}
      	}
      });
      

      笔记

      Finger 在其测试套件中使用 VirtualPointer 来模拟鼠标和触摸事件。 在 Chrome 25+ 上,preventDefault 由于 ontouchstart 已定义,因此无法正常工作。要使其工作,您必须手动阻止 mousedown 或 click 事件中的默认行为。 在图像上使用 flick 或 drag 事件时,您必须 user-drag: none 在其上设置(和前缀版本)。

      目录
      目录