JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel1" name="One" ></div>
    <div id="panel2" name="Two" ></div>

CSS

#panel1{
                width:50%;
                height:300px;
                float:left;
                background:#2E442E;
            }
            #panel2{
                width:50%;
                height:300px;
                float:left;
                background:#5D855C;
            }

JavaScript

var isMouseDown = false;
    var mouseJoint;
    var mouse = { x: 0, y: 0 };
    var gravity = { x: 0, y: -1 };

    var panel1 = document.getElementById( 'panel1' );
    var panel2 = document.getElementById( 'panel2' );

function rerouteTouch (evt) {
    if (evt.passthrough) {
        return;
    }
    evt.stopPropagation();
    var newevt = document.createEvent('TouchEvent');
    newevt.initTouchEvent (
        evt.type,
        evt.bubbles,
        evt.cancelable,
        evt.view,
        evt.detail,
        evt.screenX,
        evt.screenY,
        evt.clientX,
        evt.clientY,
        evt.ctrlKey,
        evt.altKey,
        evt.shiftKey,
        evt.metaKey,
        evt.touches,
        evt.targetTouches,
        evt.changedTouches,
        evt.scale,
        evt.rotation);
    newevt.passthrough = true;
    
    var target;
    var x = (evt.type === 'touchend') ? evt.changedTouches[0].pageX : evt.pageX;
    var y = (evt.type === 'touchend') ? evt.changedTouches[0].pageY : evt.pageY;
    
    if (document !== (target = document.elementFromPoint(x, y))) {
        target.dispatchEvent(newevt);
    }
}

document.addEventListener( 'touchstart', rerouteTouch, true);
document.addEventListener( 'touchend', rerouteTouch, true);

panel1.addEventListener( 'touchstart', onDocumentTouchStart, false );
    panel1.addEventListener( 'touchend', onDocumentTouchEnd, false );

    panel2.addEventListener( 'touchstart', onDocumentTouchStart, false );
    panel2.addEventListener( 'touchend', onDocumentTouchEnd, false );

    function onDocumentTouchStart( event ) {
        event.preventDefault();
        console.log(event);
        panel1.style.background="#2E442E";
        panel2.style.background="#5D855C";
        
    }

    function onDocumentTouchEnd( event ) {
        event.preventDefault();
        console.log(event);
        this.style.background="#ff0000";        

    }