In the past, the best method to check for the presence of a mouse was to look for touch event support. However, desktop Chrome now supports touch events, making this test misfire.
Is there a way to test directly for mouseover event support, rather than inferring it based on the presence of touch events?
Resolution: Here is the code that worked, based on the answer from AshleysBrain.
jQuery(function()
{
// Has mouse
jQuery("body").one("mousemove", function(e)
{
attachMouseEvents();
});
// Has touchscreen
jQuery("body").one("touchstart", function(e)
{
// Unbind the mouse detector, as this will fire on some touch devices. Touchstart should always fire first.
jQuery("body").unbind("mousemove");
attachTouchEvents();
});
});
In the past, the best method to check for the presence of a mouse was to look for touch event support. However, desktop Chrome now supports touch events, making this test misfire.
Is there a way to test directly for mouseover event support, rather than inferring it based on the presence of touch events?
Resolution: Here is the code that worked, based on the answer from AshleysBrain.
jQuery(function()
{
// Has mouse
jQuery("body").one("mousemove", function(e)
{
attachMouseEvents();
});
// Has touchscreen
jQuery("body").one("touchstart", function(e)
{
// Unbind the mouse detector, as this will fire on some touch devices. Touchstart should always fire first.
jQuery("body").unbind("mousemove");
attachTouchEvents();
});
});
- Great! Tried with playbook (RIM OS), and works fine first time, but on page refresh it detects mousemove (!?). However, attaching the test to some #id instead of body works perfectly. – MaxD Commented Feb 17, 2013 at 0:30
4 Answers
Reset to default 5 +100You could do the opposite of the solution for detecting keyboard or touch input. Just wait for an actual touch event or mouse move event and decide based off that. If you check the presence of an event handler, the browser may indicate it has the event even if it is not currently running on hardware that supports it, so the only reliable thing to do is wait and see which actual events fire.
You might want to think about using Modernizr, you could do something like the following using the Modernizer.hasEvent()(docs) method:
Modernizr.hasEvent("mouseover", document);
I have try this and it's work.
<html>
<head>
<script type="text/javascript">
function isEventSupported(eventName) {
var el = document.createElement("body"[eventName] || "div");
var isSupported = "on" + eventName.toLowerCase() in el || top.Event && typeof top.Event == "object" && eventName.toUpperCase() in top.Event;
el = null;
return isSupported;
}
</script>
</head>
<body onload="alert(isEventSupported('mouseover'));">TEST mouseover event</body>
</html>
I took the function isEventSupported from http://www.strictly-software./eventsupport.htm
If web sites can detect that you're using a mobile browser as accurately as they do why can't you use the same technique to infer they don't have mouseover support?