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

Question

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

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

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

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

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

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

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

Answer 1

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

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

编码愉快!