了解触摸事件

2024-03-12

我正在尝试让我的一些库与触摸设备一起使用,但我很难弄清楚它们是如何支持的以及它们是如何工作的。

基本上有5个触摸事件 https://developer.mozilla.org/en-US/docs/DOM/Touch_events,但移动浏览器之间似乎仅在以下方面达成了共识:touchstart事件(废话)。我创建了一个fiddle http://jsfiddle.net/cpUsA/4/作为测试用例。

我已经在搭载 Android 4 的 Galaxy Note 上对此进行了测试,但您也可以使用桌面浏览器检查该链接。

目标是尝试弄清楚如何处理轻击、双击和长击。没有什么花哨。

基本上,发生的情况是这样的:

The Android股票浏览器不触发触摸事件。它只是尝试通过点击来模拟鼠标点击,射击mousedown, mouseup and click连续事件,但双击只会放大和缩小页面。

Chrome对于 Android,当手指触摸屏幕时会触发 touchstart 事件。如果它发布得足够快,它就会被触发mousedown, mouseup, touchend最后click events.

的情况下long tap,大约半秒后它会点火mousedown and mouseup, and touchend当手指抬起时,没有click事件在最后。

If you 动动你的手指,它会激发一个touchmove事件几次,然后触发touchcancel事件,之后什么也没有发生,甚至没有touchend抬起手指时发生的事件。

A 双击触发放大/缩小功能,但按事件触发组合touchstart-touchevent两次,没有触发任何鼠标事件。

Firefox对于 Android 正确触发touchstart事件,以及短时水龙头火灾的情况mousedown, mouseup, touchend and click然后。

的情况下long tap,它点火mousedown, mouseup最后touchend事件。对于这些事情,Chrome 是一样的。

但如果你动动你的手指,如果发生火灾touchmove连续地(正如人们所期望的那样)但它并没有not开火touchleave当手指离开具有事件侦听器的元素时发生的事件,并且不会触发touchcancel当手指离开浏览器视口时发生事件。

For 双击,它的行为就像 Chrome 一样。

歌剧移动只需短按一下,就会执行与 Chrome 和 Firefox 相同的操作,但长按会激活某种我真的想禁用的共享功能。如果您移动手指或双击,它的行为就像 Firefox 一样。

Chrome 测试版对于短按,它会执行通常的操作,但在长按的情况下,它不会触发mouseup事件不再,只是touchstart, then mousedown半秒后,然后touchend当手指抬起时。当手指移动时,现在它的行为就像 Firefox 和 Opera Mobile。

的情况下双击,它不会触发触摸事件当缩小时,但仅限于放大时。

Chrome 测试版显示了最奇怪的行为,但我不能真正抱怨,因为它是测试版。

问题是:有没有一种简单的方法来尝试检测触摸设备最常见的浏览器中的短按、长按和双击?

遗憾的是,我无法在带有 Safari 的 iOS 设备或 Windows Phone 7/Phone 8/RT 的 IE 上测试它,但如果你们中的一些人可以,我们将非常感谢您的反馈。


如果您还没有阅读过 Hammer.js 的源代码,我建议您阅读一下

https://github.com/hammerjs/hammer.js/blob/master/hammer.js https://github.com/hammerjs/hammer.js/blob/master/hammer.js

注释和代码大约有 1400 行,有很棒的文档,而且代码很容易理解。

可以看到作者是如何选择解决很多常见的触摸事件的:

按住、点击、双击、拖动、dragstart、dragend、dragup、dragdown、 向左拖动、向右拖动、滑动、向上滑动、向下滑动、向左滑动、向右滑动、 变换、变换开始、变换结束、旋转、捏合、捏合、 捏开、触摸(手势检测开始)、释放(手势检测 结束)

我认为阅读源代码后,您将对触摸事件的工作原理以及如何识别浏览器能够处理哪些事件有更好的理解。

http://eightmedia.github.io/hammer.js/ http://eightmedia.github.io/hammer.js/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

了解触摸事件 的相关文章

  • 如何清除ember js中的表单数据

    嗨 我对 ember js 很陌生 我写了一个新员工入职表格 并通过路线发送数据 数据保存成功 但问题是提交表单后我的表单数据没有清除 代码如下 app js App Router map function this resource sa
  • Javascript - 模板字符串不能漂亮地打印对象

    我可以使用 ES6 模板字符串来漂亮地打印 javascript 对象吗 这是来自 React Native 项目 其中console log 输出到 Chrome 调试工具 我想要的是 const description App open
  • 突出显示 Html 文档中不同标签的文本

    我是新来的角js 现在我正在突出显示 HTML 文档中的文本 So 我的代码是这样的 var InstantSearch highlight function container highlightText var internalHigh
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • 目前最好的 Javascript 模板引擎是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 无法实现模块模式

    我正在尝试重现 Douglas Crockford 所著的 Javascript The Good Parts 一书中的一些代码 这个想法是使用闭包进行对象封装并避免Javascript固有的全局变量 var serial maker fu
  • Angular JS - 提交到 $http 时日期发生变化 - 时区问题

    我遇到一个奇怪的问题Date当它通过 http put 传递到 API 时发生变化 我怀疑时区问题 Datepicker 触发 ng change 事件 console log Tue Jun 10 2014 00 00 00 GMT 01
  • Iphone 上的 Javascript 日期解析

    我正在开发一个针对移动设备的离线 Javascript 网站 iPhone 就是这样的一种移动设备 我正在尝试从 REST API JSON 对象的成员 解析日期 我在用着 Date parse 2010 03 15 10 30 00 这适
  • contenteditable,在文本末尾设置插入符号(跨浏览器)

    输出在Chrome div style border 1px solid 000 width 500px height 40px hey div what s up div div div div
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • 如何从 JavaScript 触发 ASP.NET Core 客户端验证

    有没有办法从 JavaScript 触发 ASP NET Core 客户端验证 我有一个 Razor Pages 页面 其中包含
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • JavaScript 对象镜像/单向属性同步

    出于安全目的 我需要一个 镜像 对象 也就是说 如果我创建对象 A 并浅克隆 A 的副本并将其称为 B 则每当 A 的属性发生更改时 我希望 B 自动更新自身以反映更改 但反之则不然 换句话说 单向属性同步 我的问题 是否已经存在我不知道的
  • 如何在 HTML5/CSS3 中将视口锁定为纵向方向

    是否可以在移动设备上将视图端口的方向锁定为纵向 我用谷歌搜索了它 但无法找到确切的操作方法 这个技巧应该有效 media screen and orientation landscape html Rotate the content co
  • 在气球内显示带有照片的多个地标的最佳做法是什么?

    我有一个项目如下 从手机上拍摄几张照片 将照片保存在网络系统中 然后将照片显示在其中的谷歌地球上 我读过很多文章 但它们都使用 fetchKml 我读过的一篇好文章是使用 php 但使用 fetchKml 我不知道是否可以使用 parseK
  • Android 上的 Chrome 强制隐藏地址栏

    我最近开发了一个获取混合 http https 内容的网站 因此 我总是将地址栏显示在顶部 它不会像其他网站那样自动隐藏 这就是我要说的 This https planetkde org 是网站的链接 内容是从各种来源获取的 因此无法过滤非
  • Ng Bootstrap 日期范围选择器 [markDisabled] 不适用于输入

    我正在尝试禁用某些日期ng 引导范围选择器 https ng bootstrap github io components datepicker overview 目前 我在弹出窗口中有一个范围选择器 并且我正在使用 markDisable
  • JQuery 屏蔽输入插件不起作用

    我已将 JQuery Masked 输入插件添加到我的 Web 项目中 但它根本不起作用 该插件可以在这里找到 http digitalbush com projects masked input plugin http digitalbu
  • 让管道自我刷新角度

    我有来自后端的静态时间戳 我想每 1 秒刷新一次管道以获取现在的日期 这是我的烟斗 import Pipe PipeTransform from angular core import moment from moment Pipe nam
  • Escape String - 在 Javascript 中输出rails字符串[重复]

    这个问题在这里已经有答案了 我正在尝试将字符串值分配给 erb 文件中的 javascript 对象 如下所示 var data name 问题是 如果name is Tom s small ears 的输出data name将会Tom x

随机推荐