JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hold">Hold me without moving the finger at all.</div>
<div id="tap">Tap here while holding a finger on the other div. The body should turn green when the finger start touching and turn blue back once it is lifted.
But what happens is that the touchend event for the tap action is fired only when a touchmove is fired for the holding finger, not when the tapping finger actually end touching the div.
</div>

CSS

#hold {
    width:200px;
    height: 200px;
    background-color:cyan;
}
#tap {
    width:300px;
    height:300px;
    background-color:red;
}
body {
    background-color:blue;
}

JavaScript

init();

function init () {
    $("#hold").on('touchstart', enable);
}

function enable(ev) {
    $('#hold').off();
    $("#hold").on('touchmove', fingermoved);
    $('#hold').on('touchend', disable);
    
    $('#tap').on('touchstart', function () {
        $('body').css('background-color', 'green');
        return false;
    });
    $('#tap').on('touchend', function () {
        $('body').css('background-color', 'blue');
        return false;
    });
    return false;
}

function disable (ev) {
    $('#tap').off();
    $('#hold').off();
    init();
    return false;
}

function fingermoved (ev) {
    // make #hold blink when finger moves
    $('#hold').css('background-color', 'white');
    setTimeout(function () {
      $('#hold').css('background-color', 'cyan');          
    }, 50);
}