Question

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

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

但是，我的脚本在我的计算机上停止使用Chrome5（目前是测试版）。我研究了一下，正如我所料，在Chrome5中（而不是旧的Chrome，Firefox，IE等）{} {}}不再是document.ontouchmove而是undefined。

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

所以解决方案似乎很简单：应用BOTH事件类型。正确？

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

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

Answer 1

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

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

快乐的编码！

Answer 2

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

例如为：



function touch_events() {
document.onmousemove = null;
...
}

function mouse_events() { ... }

document.ontouchmove = touch_events;
document.onmousemove = mouse_events;

Answer 3

这太明显了吗？

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

Answer 4

var support_touch =（typeof Touch ==“object”）;

Answer 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 
}

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

Answer 6

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

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

一般情况下，如果您希望您的应用程序同时使用两种输入事件类型，那么您将无法选择，只能为所有这些事件注册侦听器。您可能已经使用touchstart和mousedown的相同处理程序，因此这是我确保实际处理后续相同事件中只有一个（保存cpu周期和重绘以及帮助）的地方避免可能的副作用）。

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

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

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

6 个答案: