JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<button id="test">

</button>

JavaScript

if (!('onpointerdown' in document.documentElement)) {
    console.log("Redirect pointer down");
    var EventTarget = EventTarget || Element;
    EventTarget.prototype.addEventListener2=EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(functionName, handler) {
        if(functionName=="pointerdown"){

            var isTouchCapable = 'ontouchstart' in window ||
                (window.DocumentTouch && document instanceof window.DocumentTouch) ||
                navigator.maxTouchPoints > 0 ||
                window.navigator.msMaxTouchPoints > 0;

            if(isTouchCapable){
                console.log("Redirect porterdown -> touchstart");
                this.addEventListener2("touchstart", function(handler,e){
                    console.log("touchstart redirect to pointer down0");
                    var evt = new Event('pointerdown');
                    handler(evt);
                    console.log("touchstart redirect to pointer down1");
                }.bind(this,handler));
            }else{
                this.addEventListener2("mousedown", function(handler,e){
                    console.log("mousedown redirect to pointer down0");
                    var evt = new Event('pointerdown');
                    handler(evt);
                    console.log("mousedown redirect to pointer down1");
                }.bind(this,handler));
            }

        }else{
            this.addEventListener2(functionName, handler);
        }
    };
    console.log("Redirect pointer down1");


    console.log("Redirect pointer down2");
}

 $("#test").on('pointerdown',function(){
 		alert("test")
 });