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

Detect touch events in Chrome on Windows 8 with touchscreen

本文关键字:Chrome 检测 事件 触摸 触摸屏 Windows      更新时间:2023-09-26

我构建了一个触摸/鼠标友好的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
}

链接到真实代码

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

我可以一起添加鼠标和触摸事件:

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

这没关系,但是我对event.touches[0].pageX有问题

链接到插件登录页面

谢谢!

问题已解决

为了让鼠标和触摸事件在带有触摸屏的 Windows 8 chrome 上协同工作,我必须:

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

2.检查"事件触摸":

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

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

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

2.检查"事件触摸":

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

最简单的解决方案是包含触摸打孔插件 http://touchpunch.furf.com/

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