检测浏览器功能和鼠标和触摸的选择性事件答案

【问题标题】：Detecting browser capabilities and selective events for mouse and touch检测浏览器功能和鼠标和触摸的选择性事件
【发布时间】：2010-05-07 13:19:36
【问题描述】：

我现在开始使用触摸事件有一段时间了，但我偶然发现了一个相当大的问题。到目前为止，我检查了是否支持触摸功能，并在此基础上应用选择性事件。像这样：

if(document.ontouchmove === undefined){
    //apply mouse events
}else{
    //apply touch events
}

但是，我的脚本在我的计算机上的 Chrome5（目前是测试版）中停止工作。我对其进行了一些研究，正如我所料，在 Chrome5 中（相对于旧版 Chrome、Firefox、IE 等）document.ontouchmove 不再是 undefined 而是 null。

起初我想提交一个错误报告，但后来我意识到：有些设备同时具有鼠标和触摸功能，所以这可能很自然，也许 Chrome 现在定义了它，因为我的操作系统可能支持这两种类型的事件。

所以解决方案似乎很简单：应用两种事件类型。对吧？

问题现在发生在移动设备上。为了向后兼容并支持仅使用鼠标事件的脚本，移动浏览器也可能会尝试触发它们（在触摸时）。因此，如果同时设置了鼠标和触摸事件，则可能每次都会调用某个处理程序两次。

解决这个问题的方法是什么？有没有更好的方法来检查和应用选择性事件，或者我必须忽略浏览器有时同时触发触摸和鼠标事件时可能发生的问题？

【问题讨论】：

我无法测试，但在触摸事件上返回 false 会取消其默认行为（触发“向后兼容”鼠标事件？）

标签： javascript events browser mouse touch

【解决方案1】：

尝试创建一个虚拟元素并为其附加一个触摸事件处理程序，然后检查该处理程序是否属于“函数”类型。虽然这不是万无一失的，因为某些浏览器将允许触摸事件处理程序，尽管它们在非触摸设备上运行 - 但它可能与您所获得的一样接近。所以，像这样：

var hasTouch = function() {
    var dummy = document.createElement("div");
    dummy.setAttribute("ontouchmove", "return;");
    return typeof dummy.ontouchmove == "function" ? true : false;
}

编码愉快！

【讨论】：

在hasTouch后面加一个()，所以它是一个布尔值，只会执行一次:)

【解决方案2】：

如果触摸事件触发，请尝试禁用鼠标事件？

例如：

功能触摸事件（）{ 文档.onmousemove = null; ... } 功能鼠标事件（）{...} document.ontouchmove = touch_events; document.onmousemove = 鼠标事件；

【讨论】：

【解决方案3】：

这也太明显了吧？

if(document.ontouchmove !== undefined || document.ontouchmove == null){
    //apply touch events
}else{
    //apply mouse events
}

【讨论】：

或者可能是if(...ontouchmove !== undefined && typeof(...ontouchmove) == function){...}

【解决方案4】：

var support_touch = (typeof Touch == "object");

【讨论】：

【解决方案5】：

与 Ola 的回答类似，我发现只是一个简单的检测工作，但我还发现，特别是古怪的 android 设备（如野火）并不总是定义此事件 - 这对我很有效：

//detect capabilities
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null);

//if so do somemthing
if (this.is_touch_device) {
    //like publishing a custom event 
}

（可能是一种更好的方法：）

【讨论】：

【解决方案6】：

我是不是弄错了，或者到目前为止，这里的每个帖子都回答了你没有问过的问题？至少你现在有很多替代方法来检查支持的事件:)

无论如何，关于您的问题：我会说这取决于你正在建造什么。我假设当您编写“基于此的应用选择性事件”时，您的意思是添加事件侦听器和-Handlers？另外我假设您还没有处理多点触控（还）？

一般来说，如果您希望您的应用同时使用这两种输入事件类型，那么您别无选择，只能为所有这些类型注册侦听器。您可能已经在为touchstart 和mousedown 使用相同的处理程序，所以我会确保只有一个后续相同事件被实际处理（以节省 CPU 周期和重绘以及帮助避免可能的副作用）。

说到触控设备，说到单点触控，我可以看到我的 10 级 (2.3.3) 手机会生成两个事件 - 鼠标事件，所以“经典”网络（所有这些 onmousedown-events 等） ...）会起作用，触摸事件......好吧，因为它显然是一个触摸设备。但是仅检查 javascript API 是否支持 TouchEvents 并不能告诉您有关输入设备的任何信息，例如：kubuntu 桌面上的 rekonq 浏览器对于上述示例返回 true - 但除非与触摸屏一起使用，否则它永远不会触发它们。

也许通过 window.navigator.userAgent 将设备分开是一种更可行的方法？

【讨论】：