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

前端之家收集整理的这篇文章主要介绍了javascript – 检测浏览器功能和鼠标和触摸的选择性事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

但是,我的脚本在我的计算机上停止使用Chrome5(目前是测试版).我研究了一下,正如我所预料的那样,在Chrome5中(相对于较旧的Chrome,Firefox,IE等),document.ontouchmove不再是未定义的,而是null.

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

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

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

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

最佳答案
尝试创建一个虚拟元素并将触摸事件处理程序附加到它,然后检查处理程序是否为“function”类型.这不是万无一失的,因为有些浏览器会允许触摸事件处理程序,尽管它们运行在非触摸设备上 – 但它可能会尽可能接近你.所以,像这样:

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

快乐的编码!

猜你在找的JavaScript相关文章