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

Question

我现在开始使用触摸事件一段时间了,但我偶然发现了一个很大的问题.到目前为止,我检查了是否支持触摸功能,并根据它来应用选择性事件.像这样:

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

但是,我的脚本在我的计算机上停止使用Chrome5(目前是测试版).我研究了一下,如我所料,在Chrome5(相对于旧的浏览器,火狐,IE等)document.ontouchmove不再undefined,但null.

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

所以解决方案看起来很简单:应用BOTH事件类型.对？

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

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

Answer 1

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

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

快乐编码！