j 查询触摸事件

这是一系列的插件,可以创建额外的事件,在为移动设备开发时可以与jQuery结合使用. 事件也与桌面浏览器相兼容,以确保您的项目最终兼容. 时间,我们将更新存储库 包括一些非常基本的示威 让你开始使用事件, 但是现在,我们已经 列出一个列表 事件提供, 和他们做什么.

如所解释的,事件每起都是由本土触摸事件所触发的,或者通过点击事件所引发. 插件会自动检测用户的设备是否相容,并在需要时会使用正确的本地事件. 希望这些活动将有助于帮助jQuery开发单环境,用于移动网络应用开发.

目录:

1. 版本历史
2. 安装
3. 使用量
4. 活动
5. 回调数据
6. 定义阈值
7. 工具函数
8. 演示
9. 所需资源
10. 许可证

1. 版本历史:

经过近2年的公开beta,我高兴地宣布,图书馆现在正式启动,作为 1.0.0版本 翻译. 我会随时间推移更新版本历史, 包括修饰、特征和改进摘要:

• 2.0.3版本 翻译: (2020-04-23) (中文(简体) )
  • 修复错误 165号
• 2.0.2版 页面存档备份,存于互联网档案馆 (2020-04-21) (中文(简体) )
  • 将事件绑定到 document 财务报告和审定财务报表 window。 。 。 .
• 更新国家防范机制,以便检测最新释放情况.
• 2.0.1版 (中文(简体) ) (2019-12-02) (中文(简体) )
  • 修复错误 156号
• 2.0.0版 (中文(简体) ) (2018-05-20) (中文(简体) )
  • 添加了双指龙头事件( T)tap2) (中文(简体) ).
  • 添加双指接合事件( E)taphold2) (中文(简体) ).
  • 添加了设置函数,以方便全球设定阈值.
  • 在元素的相抵位置有时不正确的地方修复一个错误 .
  • 其他小错误修正 .
• 1.0.9版 互联网档案馆的存檔,存档日期2013-12-04 (2017-06-07) (中文(简体) )
  • 修复一个对多个元素绑定且具有相同选择器的bug doubletap。 。 。 .
• 版本1.0.8 (2017-02-01) (中文(简体) )
  • 修复触摸设备上某些Chrome事件不能正确射击的bug.
  • 添加许可证信息来修改脚本 .
• 1.0.7 版本 (中文) (2017-02-01) (中文(简体) )
  • 添加阈值支持 taphold
• 1.0.6 版本 (中文(简体) ) (2016-11-16) (中文(中国大陆) )
  • 添加斜方因子 singletap
  • 固定一个错误在哪里 offset() 有时有人呼吁 null (代替 window) (中文(简体) ).
• 版本 1.0.5 (2015-11-13) (中文(简体) )
  • 将报告的主要错误修复 offset 当事件位于母元素内部时,其位置是不正确的.
• 1.0.4版 互联网档案馆的存檔,存档日期2013-12-02 (2015-11-12) (中文(简体) )
  • 从 MSPointerEvent 与 IE11 和边缘兼容
  • 删除的多名事件 tap。 。 。 .
• 1.0.3 版本 内容提要 (2015-11-10) (中文(简体) )
  • 无数小错误修正
  • 修正一个错误, 相对于事件返回的偏移位置 当前目标而不是绑定的目标.
• 第1.0.2号版本 (2015-08-26) (中文(简体) )
  • 无数错误修正
  • 添加对 MSPointerEvent
• 1.0.1 版本 (中文(简体) ) (2015-08-21) (中文(中国大陆) )
  • 添加 Bower 包以方便安装
  • 在Windows Mobile下的Internet Explorer没有触发某些事件的地方固定一个错误.
• 版本 1.0.0 (2015-07-18) (中文(中国大陆) )
  • 库在小错误修正和最终调整后正式输入了 1.0.0.

2. 安装:

jQuery Touch Eventions,如名称所建议,只要求jQuery库(1.7+版本)运行. 您应该下载最新发布的 src 文件夹,并包含您的工程中的 Javascript 文件, 之后 j 查询已包括在内。 建议把密码包入 DOMReady j 查询的回调功能( N)$(function() { })(例如,第1行).

手动安装 :

一旦您从主分支下载了JS文件,您应该使用以下代码将其包括进来:

<script type="text/javascript" src="path/to/jquery.mobile-events.min.js"></script>

帅呆了 (简体中文) 已将库直接添加到您的应用程序中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"></script>

或者,您也可以使用 Bower 安装 jQuery-touch- events 如下:

$ bower install jquery-touch-events

j 也可使用国家预防机制安装下列查询触摸事件:

$ npm i @benmajor/jquery-touch-events

3. 用途:

上述所有事件都是用 jQuery 写的 event.special 对象,因此可以结合 jQuery 的事件处理功能,以及快捷键包装。 因此,本库所支持的所有事件都可以使用任何jQuery自己的事件特定方法来处理,例如: on() 财务报告和审定财务报表 one()。 。 。 .

以下代码片段以 jQuery 显示一些基本用途 :

装订 tap 事件到元素:

绑定时,请使用 jQuery 的 on() 函数如下(避免使用 live() 财务报告和审定财务报表 bind() 因为这些现在已贬值,并将从未来的jQuery版本中删除.

$('#myElement').on('tap', function(e) { 
    console.log('User tapped #myElement'); 
});

触发事件 :

$('#myElement').trigger('tap');

删除事件 :

$('#myElement').off('tap', handler);

使用方法包装 :

$('#myElement').tap(function(e) { 
    console.log('User tapped #myElement'); 
});

方法链:
链路也被保留了下来,因此您可以很容易地将这些事件与其他jQuery函数结合使用,或者将多个事件附加在一个单一的链路LOC中:

$('#myElement').singletap(function() { 
    console.log('singletap');
}).doubletap(function() { 
    console.log('doubletap'); 
});

4. 活动:

• tapstart
  一旦用户开始接触某个元素(或点击,用于桌面环境),即被点燃.
• tapend
  在用户从目标元素中放出手指后被放出(或者在桌面上放出鼠标按钮).
• tapmove
  一旦用户开始对一个元素移动手指(或移动鼠标,为桌面环境),即被点燃.
• tap
  每当用户点击并放出手指指向目标元素时,都会发射此事件. 在利用这一活动与水龙头活动同时进行时,应注意谨慎,特别是: doubletap。当 doubletap ,因此建议使用 singletap 在这种情况下.
• singletap
  与 tap 此事件仅在确定用户只一次性调用目标元素时触发 。 这不会被 doubletap 或者说 taphold,与 tap。由于我们需要进行一些测试,以确保用户不会在目标元素上被双拍或持有一拍,因此这一事件会被短暂地延迟(目前为500毫秒)发射.
• doubletap
  每当用户在目标元素上双打时触发. 阈值(水龙头之间的时间)目前设定为500毫秒.
• taphold
  当用户点击目标元素时,该事件会被触发,并至少将手指留在元素上 750毫秒( 750毫秒)。 。 。 .
• swipe
  每当用户用手指刷出目标元素时,就称为"指". 它不依赖方向,而且无论用户刷取的方向如何都会被发射.
• swipeup
  类似 swipe,但仅当用户在目标元素上向上(即从下到上)刷出手指时才被调用
• swiperight
  类似 swipe,但只有在用户在目标元素上将手指从左到右擦去时才触发.
• swipedown
  类似 swipe,但只有在用户在目标元素上将指头从上到下擦去时才触发.
• swipeleft
  类似 swipe,但只有在用户从右到左刷指时才触发.
• swipeend
  这个 swipeend 当刷新事件结束(即用户完成移动手指/光标并发布)时,事件会被剪切。 这个事件应该用于处理自定义函数,因为它只有在刷子结束时才会被触发,而不是在达到阈值时立即被触发.
• scrollstart
  一旦在目标元素上开始滚动即被触发.
• scrollend
  一旦在目标元素上停止滚动,即被触发.
• orientationchange
  当设备的取向被改变时,此事件会被触发. 请注意,它对非移动装置或不支持当地人的装置使用节流装置 orientationchange 活动。 在后一种情况下,会发现视图大小的变化.

5. 回调数据:

每个事件现在都有一个第二个参数,可以被传递到指定的回调函数. 这个参数包括一些与事件具体相关的基本数据,可以作为标准的JavaScript对象访问. 要钩入此参数,请使用以下代码:

$(element).swipeend(function(e, touch) {  });

鉴于上述例子, touch 现在将包含一些可以通过下列方式访问的基本数据: touch.。第一个参数将代表最后一个 本地语言 事件(这两个参数所使用的名称无关).

每个事件提供不同的回调数据. 以下显示在第二个参数内返回回调函数的大量数据:

tapstart, (中文(简体) ), tapend, (中文(简体) ), tapmove, (中文(简体) ), tap, (中文(简体) ), singletap数字 :

offset - 包含事件相对于约束的元素的X和Y位置的物体。 通过 offset.x 财务报告和审定财务报表 offset.y 页:1.

position - 包含事件相对于屏幕的X和Y位置的物体。 通过 position.x 财务报告和审定财务报表 position.y 页:1.

target - 触发事件的 j 查询对象.

time - JavaScript时间戳事件发生( 自Unix Epoch 起为毫秒)

taphold数字 :

duration: 用户用毫秒计算的时间.

endOffset - 包含结束事件(即用户释放出手指或鼠标)的 X 和 Y 位置的物体,相对于该事件受约束的元素。 通过 endOffset.x 财务报告和审定财务报表 endOffset.y 页:1.

endPosition - 包含端事件(即用户释放出手指或鼠标)相对于屏幕的X和Y位置的对象。 通过 endPosition.x 财务报告和审定财务报表 endPosition.y 页:1.

endTime - Java 脚本时间戳 taphold 被触发(Unix Epoch后为毫秒)。 这通常等同于: startTime + 键 taphold 阈值.

startOffset - 包含起始事件(即用户按住手指或鼠标)的 X 和 Y 位置的物体,相对于该事件受约束的元素。 通过 endOffset.x 财务报告和审定财务报表 endOffset.y 页:1.

startPosition - 包含起始事件(即用户按下手指或鼠标)相对于屏幕的X和Y位置的对象。 通过 endPosition.x 财务报告和审定财务报表 endPosition.y 页:1.

startTime - Java 脚本时间戳 taphold 开始( 自 Unix Epoch 起为毫秒) .

target - 触发事件的 j 查询对象.

doubletap数字 :

firstTap - 含有相同数据的物体 tap 事件,但第一个水龙头发生.

secondTap - 含有相同数据的物体 tap 事件,但是要进行第二次(即最后一次)水龙头.

interval - 两个水龙头之间用毫秒的时间.

swipe, (中文(简体) ), swipeup, (中文(简体) ), swiperight, (中文(简体) ), swipedown, (中文(简体) ), swipeleft, (中文(简体) ), swipeend数字 :

direction - 代表刷取方向的字符串(或 up, (中文(简体) ), right, (中文(简体) ), down 或者说 left) (中文(简体) ).

duration - 刷卡时间(以毫秒计) swipeend 只因为这通常等于定义 swipe-threshold。 。 。 .

xAmount - X轴上被刷的像素数(不论方向返回).

yAmount - Y轴上被刷的像素数量(不论方向返回).

startEvnt - 含有相同数据的物体 tap 事件,但当刷新开始时被捕获.

endEvent - 含有相同数据的物体 tap 事件,但当擦除完成时被捕获.

6. 界定门槛:

您也可以定义用于 swipe 活动(swipeup, (中文(简体) ), swiperight, (中文(简体) ), swipedown 财务报告和审定财务报表 swipeleft) 防止干扰卷轴和其他事件。 为此,仅指定 data-xthreshold 或者说 data-ythreshold 目标要素如下:

<div id="mySwiper" data-xthreshold="500"></div>

您定义的值是用户在目标元素上触发事件前必须移动的像素的相差. 如果没有定义阈值,则默认为 50px 将被使用.

data-xthreshold 定义水平阈值.

data-ythreshold 定义垂直阈值.

自1.0.7起更新: 应用户和贡献者的要求,从1.0.7起,现在还可以界定 doubletap 通过 jQuery 的阈值 data- 属性如下:

data-threshold 定义时间(以毫秒计),然后 doubletap 事件向目标元素开火.

7. 功用函数:

除了所提供的众多额外事件外,图书馆还包含一些实用功能,可以用来在您的网站或应用程序中进一步发挥本地事件的力量. 这些公用功能可用于统一基本事件,例如: tapstart 或者说 mousedown。 。 。 .

提供下列公用功能(每个功能在 jQuery 命名空间注册,并应当与 $.funcName() (或 jQuery.funcName() 对于兼容性:

• isTouchCapable()数字 :
  回返 true 或者说 false 取决于是否支持触摸事件.
• getStartEvent()数字 :
  回返 touchstart 用于触摸装置,或 mousedown 用于标准环境.
• getEndEvent()数字 :
  回返 touchend 用于触摸装置,或 mouseup 用于标准环境.
• getMoveEvent()数字 :
  回返 touchmove 用于触摸装置,或 mousemove 用于标准环境.
• getTapEvent()数字 :
  回返 tap 用于触摸装置,或 click 用于标准环境.
• getScrollEvent()数字 :
  回返 touchmove 用于触摸装置,或 scroll 用于标准环境. 使用此功能时应当谨慎, 因为一些移动浏览器会正确绑定 scroll 以及 touchmove。 。 。 .

8. 演示:

我做了一个简单的演示程序, 显示无数事件正在发生。 左手侧的操纵台用于显示被调用的事件信息. 您可以通过浏览页面的源头来轻松地检查代码, 以隐藏更多关于如何运作的信息。 请点击下方查看演示:

http://lincweb.co.uk/labs/jquery-touch-events/demo/ (英语)

请注意,本次演示使用Google主机jQuery文件,同时也从GitHub取出最新版本的事件库. 这是检查图书馆状况的好地方。 由于这个演示会使用香草码,所以在这里检查库的功能以供参考是一个好主意. 如果你在图书馆遇到问题 请先用你的设备检查一下 您可以在下面的 QR 中扫描直接进入网页 :

9. 所需经费:

图书馆与jQuery 1.7.0+. 所有主要浏览器都经过了毫无问题的测试. 库与jQuery < 1.7不相容.

10. 许可证:

获得麻省理工学院许可证:

特此准许任何人免费获得本软件和相关文件文件("软件")的副本,不受限制地在软件中进行交易,包括不受限制地享有软件的使用、复制、修改、合并、出版、分发、分版和(或)销售的权利,并允许软件获得者这样做,但须符合下列条件: 1

上述版权通知和许可通知应载入软件的所有副本或大部分.

软件是提供的"AS IS", 没有任何种类的恐惧, 释放或被卷入, 包括但不限制在 危机的保障, 证明一个特定的目的和无关。 任何索赔、索赔或其他负债,无论是合同、交易或其他行为,产生于、产生于或涉及软件或软件的使用或其他交易的行为,都不得作为担保.