在带有触摸屏的 Windows 8 上检测 Chrome 中的触摸事件
Detect touch events in Chrome on Windows 8 with touchscreen
我构建了一个触摸/鼠标友好的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/
相关文章:
- 如何动态检测Mozilla/Chrome上是否启用SSO
- Google Chrome扩展程序可以检测所有脚本何时加载完成吗
- 无法在Chrome(打包)应用程序上检测到ESC按钮(全屏显示时)
- 有没有一种方法可以在过滤掉iOS Chrome、Firefox和其他浏览器的同时检测iOS safari
- Chrome扩展在检测iframe时失败
- 用Chrome检测Windows8+中的自定义协议处理程序
- 使用Chrome扩展内容脚本检测youtube视频事件
- MS Edge有一个window.chrome对象??破坏浏览器检测
- 在IE9中未检测到视图模型函数绑定,但在FF和Chrome中有效
- 检测 Chrome 浏览器窗口的宽度和高度,以防止元素溢出
- 如何在加载javascript时检测Safari,Chrome,IE,Firefox和Opera浏览器
- 浏览器检测浏览器,如 Chrome Canary
- 检测是否安装了 Chrome 扩展程序
- Chrome 中的突变对象无法检测属性和 CSS 更改
- 检测 Chrome NaCl 是否可用
- 用于检测文件下载的 Chrome API
- 检测活动标签页是 chrome 扩展程序中的新标签页
- 如何检测 Chrome 默认搜索引擎
- 检测 Firefox、IE 和 Chrome 中的窗口 onblur() 事件
- 做window.chrome检测手机chrome