Modernizr.touch returns true on firefox browser

问题:

I have written a peace of code to get the event based on touch and non-touch. Its working all other browsers and devices, but Firefox. Default FF return the true.

var thumbsEvent, isTouch = Modernizr.touch; // detect the touch
if(isTouch){
   thumbsEvent = 'click';//on touch surface, click
}
else {
   thumbsEvent = 'mouseover';//on non touch surface, mouseover
}

Is there a way to manage this issue.

Example fiddle

回答1:

On behalf of Modernizr - We're really sorry about this.

Modernizr.touch has been renamed Modernizr.touchevents in the yet-to-be-released version 3.0, as it is a far more accurate description of the detect. Basically, all this detect is doing is checking for the existence of touch events, and returning true if they are found. Desktop chrome does the same thing if you enable developer tools. It just means that your version of firefox on your laptop is reporting support of touch events, for several possible reasons.

回答2:

i had the same issue, this fixed it for me: in firefox go to "about:config", then search for the setting "dom.w3c_touch_events.enabled" and reset that one. i then had to restart firefox and afterwards "Modernizr.touch" correctly returned "false" for me.

source: https://github.com/Modernizr/Modernizr/issues/1225

回答3:

Have same issue: Modernizr.touch returns true at desktop FireFox 33.1, Mac OS.

My solution: using mobile-first approach, apply all touch-related bells-and-whistles by default. If Modernizr detect .no-touch then apply (or disable) some site features for desktop users.

回答4:

I had the same issue some time ago.

The problem was that some laptop models come with a version with touchscreen. We found out that if one uses such a model, Modernizr.touch returns true even if this person is using the non-touch laptop model version.

Now, click-events do work on touch devices, but not the other way round. So we worked around this limitation by adding an additional check:

var thumbsEvent, isTouch = Modernizr.touch;
var isAndroid = ...; // Android detection code
var isIOs = ...; // iOS detection code

// touch is only supported on iOS and Android
// devices, which have for sure a touch interface
if(isTouch && (isAndroid || isIOs) ){
    thumbsEvent = 'click';
}
else {
    thumbsEvent = 'mouseover';
}

That's probably not an optimal solution, because you need to do the device detection with user-agent sniffing instead of feature detection, which was probably why you used Modernizr in the first place.

Also, devices which support touch but are neither iOS nor Android will be excluded from touch events.

回答5:

There is a temporary fix to this. I was having the same problem so what i did was i did a little digging to find an html5 property which gets detected by FF but not on mobile devices and i found flexbox to be one of them. (Read: http://html5please.com/#flexbox). So below is the code you can use to have your problem fixed:

var isTouch = Modernizr.touch, // detect the touch
    isFlex = Modernizr.flexbox; // detect flexbox

if (isTouch) {
    // Detect if FF
    if (isFlex) ) {
       thumbsEvent = 'mouseover'; //on FF, mouseover
    } else {
       thumbsEvent = 'click';//on non-FF touch surface, click
    }
} else {
   thumbsEvent = 'mouseover';//on non touch surface, mouseover
}

Please do note that this is temporary, if mobile devices start supporting flexbox it won't work.

回答6:

It's a know Firefox Bug at least since FF27: https://bugzilla.mozilla.org/show_bug.cgi?id=970346