Detect Mouse On Touch Devices (Use With jQuery & Modernizr 3)

detect-mouse.js

// http://codepen.io/arctelix/pen/EVvxGe?editors=0010
// http://stackoverflow.com/questions/28594445/detect-mouse-on-touch-screen-device

// NOTE: Requires jQuery
// NOTE: Modified slightly to work with Modernizr - ZW

// First check if this is a touch device:
this.isTouch = 'ontouchstart' in window || (navigator.msMaxTouchPoints > 0) || $('html').hasClass('touch');

// Some vars we'll need later
var lastTouch = 0
var lastCheck = 0

function initEvents() {
    // Handle touch/mouse devices detect mouse so that touch is toggled off
    if (this.isTouch) {
        $(document).on(" touchstart mousemove " + msPointerEvent('move'), function (e) {
            e = e.originalEvent
            // Browser has pointer events
            var pe = window.PointerEvent || window.MSPointerEvent

            // Handle ie pointer events (polyfill functions are at bottom of answer)

            if (e.type == msPointerEvent('move')) {
                var touchEvent = msPointerType(e) == 'touch'
                if (touchEvent)
                    lastTouch = e.timeStamp;
                if (!this.isTouch && touchEvent)
                    return setupTouch.call(this, true)
                else if (this.isTouch && !touchEvent)
                    return setupTouch.call(this, false)
            }

                // Handle all other browser touch events
            else if (e.type == "touchstart") {
                // console.log('touchstart fired')
                lastTouch = e.timeStamp;
                if (!this.isTouch)
                    setupTouch.call(this, true);
            }

                // test mouse move and set up mouse mode if real
            else if (!pe && e.type == "mousemove" && this.isTouch) {
                if (realMouseDown.call(this, e)) {
                    setupTouch.call(this, false)
                }
            }
        }.bind(this));
    }
}
initEvents()
// Here is where we get clever. It turns out that the fake mousemove will fire in less than 500ms of the touch so we use that to detect fakes:

function realMouseDown(e) {
    var touchDif = e.timeStamp - lastTouch
    var mouseDif = e.timeStamp - lastCheck
    // false mouse event will get fired within 500ms of a touch (touchDif > 500)
    // (required for all browsers false mouse after touch event)
    var real = touchDif > 500
    lastCheck = e.timeStamp;
    //console.log('real=', real, ' mDif =' + mouseDif, ' tDif =' + touchDif)
    return real
}

// IE pointer event polyfill
function msPointerEvent(type) {
    var n = ""
    if (window.PointerEvent) // IE 11
        n = 'pointer' + type
    else if (window.MSPointerEvent) // IE 10
        n = 'MSPointer' + type[0].toUpperCase() + type.substr(1);
    return n
}

// IE pointer type polyfill
function msPointerType(e) {
    var pt = ['zero', 'one', 'touch', 'pen', 'mouse']
    return typeof e.pointerType == 'string' ? e.pointerType : pt[e.pointerType]
}

function setupTouch(state) {
    if (state) {
        // Uses Modernizr 3 classes
        $('html').removeClass('no-touchevents').addClass('touchevents');
    }
    else {
        $('html').removeClass('touchevents').addClass('no-touchevents');
    }
}