WindowsタッチPCにも対応したクロスブラウザのイベント pointer touch mouse click

touch と mouse イベント

SP/PCの両方に対応したイベントの振り分けはこれで良かったのですが。

var isTouchDevice = 'ontouchend' in document,
    eventNames    = {
        start: isTouchDevice ? 'touchstart' : 'mousedown',
        move : isTouchDevice ? 'touchmove'  : 'mousemove',
        end  : isTouchDevice ? 'touchend'   : 'mouseup',
        click: 'click'
    };

WindowsのタッチPC+Chromeの組み合わせで、マウスでボタンが効きません。
(画面タッチは効きます)
touch が先に true になってしまうため。

pointer touch mouse click イベントに対応するには

こうすると、SP/PC/タッチ搭載PC どのデバイスでも大丈夫です。

;(function(window, document, undefined) {

    var deviceEvents = {
        Touch     : typeof document.ontouchstart !== 'undefined',
        Pointer   : window.navigator.pointerEnabled,
        MSPointer : window.navigator.msPointerEnabled
    };

    var eventNames = {
        start     : deviceEvents.Pointer ? 'pointerdown' : deviceEvents.MSPointer ? 'MSPointerDown' : deviceEvents.Touch ? 'touchstart' : 'mousedown',
        move      : deviceEvents.Pointer ? 'pointermove' : deviceEvents.MSPointer ? 'MSPointerMove' : deviceEvents.Touch ? 'touchmove'  : 'mousemove',
        end       : deviceEvents.Pointer ? 'pointerup'   : deviceEvents.MSPointer ? 'MSPointerUp'   : deviceEvents.Touch ? 'touchend'   : 'mouseup',
        click     : 'click'
    };

    window.eventNames = eventNames;

})(this, this.document);

;(function($, window, document, undefined) {
    $('.btn').on(eventNames.end, function () {
        // 処理
    });
})(jQuery, this, this.document);