在带有触摸屏的 Windows 8 上检测 Chrome 中的触摸事件

Posted 2023-02-24

【中文标题】在带有触摸屏的 Windows 8 上检测 Chrome 中的触摸事件

【英文标题】：Detect touch events in Chrome on Windows 8 with touchscreen

【发布时间】：2013-09-12 09:56:23

【问题描述】：

我构建了一个触摸/鼠标友好的 jQuery 插件。它适用于手机（ios、android...）和桌面浏览器。但我对安装在带触摸屏的笔记本电脑上的 Windows 8 Chrome 有一些问题。不幸的是，我没有这样的设备，无法进行任何测试。IE10 也可以正常工作。

让我解释一下我里面有什么（非常简化的代码）：

1.检查是否为触控设备：

base.isTouch = ("ontouchstart" in document.documentElement);

2.获取适当的事件

if(base.isTouch === true)
    //use touch events:
    "touchstart.owl",
    "touchmove.owl",
    "touchend.owl"
 else 
    //usemouse events
    "mousedown.owl",
    "mousemove.owl",
    "mouseup.owl"

3.检查触摸事件：

if(base.isTouch === true)
    x = event.touches[0].pageX
    y = event.touches[0].pageY
 else 
    x = event.pageX
    y = event.pageY

link to real code

我认为 chrome 的问题在于检测我的触摸事件但使用鼠标事件并将它们转换为触摸。

我可以同时添加鼠标和触摸事件：

$('elem').on('mousedown.owl touchstart.owl',func);

这没关系，但是我遇到了 event.touches[0].pageX 的问题

link to plugin landing page

谢谢！

问题已解决

要让鼠标和触摸事件在带有触摸屏的 Windows 8 chrome 上协同工作，我必须：

1.在一个元素“touchstart.owl mousedown.owl”上添加两个事件

2.检查“event.touches”：

if(event.touches)
    x = event.touches[0].pageX
    y = event.touches[0].pageY
 else 
    x = event.pageX
    y = event.pageY

【参考方案1】：

要让鼠标和触摸事件在带有触摸屏的 windows 8 chrome 上协同工作，我必须：

1.在一个元素“touchstart.owl mousedown.owl”上添加两个事件

2.检查“event.touches”：

if(event.touches)
    x = event.touches[0].pageX
    y = event.touches[0].pageY
 else 
    x = event.pageX
    y = event.pageY

【参考方案2】：

最简单的解决方案是包含Touch Punch插件http://touchpunch.furf.com/

我为我的项目做了它，它运行良好 - 你可以测试它，这是我的项目： http://englishtotheworld.com/

【讨论】：

对不起，如果你在你的项目中使用 JQuery 库。

感谢您的回答！但我不想使用任何其他插件。

我的插件是基于jQuery库的。

欢迎您。由 JQuery 团队程序员创建的插件，已经在各种设备、浏览器及其版本上进行了测试，我不推荐 U 来创建自己的自行车。此外，如果您不想链接另一个脚本文件，您可以下载压缩版本并将其包含在 1 个文件中。

Touch Punch 适用于移动设备。我在带触摸屏的笔记本电脑上使用 Windows 8 中的 Chrome 时遇到问题。 Touch Punch 可能是上帝开发的——我不在乎——我问了关于我的插件的问题。顺便说一句，您的网站在 Chrome 中拖动鼠标有问题。谢谢