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

Question

I started using touch events for a while now, but I just stumbled upon quite a problem. Until now, I checked if touch capabilities are supported, and applied selective events based on that. Like this:

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

However, my scripts stopped working in Chrome5 (which is currently beta) on my computer. I researched it a bit, and as I expected, in Chrome5 (as opposed to older Chrome, Firefox, IE, etc.) document.ontouchmove is no longer undefined but null .

At first I wanted to submit a bug report, but then I realized: There are devices that have both mouse and touch capabilities, so that might be natural, maybe Chrome now defines it because my OS might support both types of events.

So the solutions seems easy: Apply BOTH event types. Right?

Well the problem now take place on mobile. In order to be backward compatible and support scripts that only use mouse events, mobile browsers might try to fire them as well (on touch). So then with both mouse and touch events set, a certain handler might be called twice every time.

What is the way to approach this? Is there a better way to check and apply selective events, or must I ignore the problems that might occur if browsers fire both touch and mouse events at times?

Answer 1

Try creating a dummy element and attaching a touch event handler to it, then check if the handler is of type "function". This is not foolproof though as some browsers will allow touch event handlers although they are running on a non-touch device - but it's probably as close as you'll get. So, something like this:

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

Happy coding!

Answer 2

Try disabling the mouse events if the touch events fire?

Eg:

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

Answer 3

Is this too obvious?

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

Answer 4

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

Answer 5

Did I get this wrong, or did every post so far here answer a question that you didn't ask? At least you now have loads of alternative ways to check for supported events :)

Anyway, regarding your question: I would say it depends on what you are building. I assume when you write "applied selective events based on that" you mean adding event Listeners and -Handlers? Also i assume you're not dealing with multitouch (yet)?

In general, if you want your app to work with both input event types, you're left without a choice but to register listeners for all of those. You might be using the same handler for touchstart and mousedown already, so that's the place i would make sure only one out of subsequent identical events is actually processed (to save cpu cycles and redraws as well as help avoiding possible side effects).

When it comes to touch devices, speaking of single touch, i can see my level 10 (2.3.3) phone generates both event - the mouse events, so "classic" web (all those onmousedown -events, etc...) will work, the touch events... well, because it's a touch device apparently. But only checking if the javascript API supports TouchEvents doesn't tell you anything about the input device, for instance: the rekonq browser on kubuntu desktop returns true for the above examples - but it will never fire them unless used with a touchscreen.

Maybe telling devices apart via window.navigator.userAgent would be a more feasible approach?

Answer 6

Similar to Ola's answer, I've found just a simple detect works but I also find that in particular quirky android devices (like the wildfire) don't always have this event defined - this works well for me:

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

(probably a better way of doing this :)