jQuery touchstart not working for blur

Question

The issue I have here is with touchstart . Whats happening instead of behaving like click when you click into another focused input it adds the wanted class to footer. Touchstart doesn't. Instead it seem to act to quickly for the blur and the blur happens after.

Anyone know how to stop this so touchstart behaves like click?

 $('input:not(:radio)').on('click touchstart', function (e) { if(e.type==='click'){}else{ $('footer').addClass('touched'); } }).on('blur', function () { $('.touched').removeClass('touched'); });

 footer{background:blue;display:block;height:50px;} footer.touched{background:red}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text"> <input type="text"> <footer>footer</footer>

Answer 1

So figured out a way to get it to work and also eliminate any painful flickering of the footer animating between input focus'.

 $('input:not(:radio)').on('click touchstart', function (e) { if(e.type==='click'){}else{ $('#form-footer').hide(); setTimeout(function(){ $('#form-footer').addClass('touched').show(); }, 400); } }).on('blur', function () { $('.touched').removeClass('touched'); }); 

Answer 2

I was having similiar issues trying to get a Bootstrap 5 button to work the same between mouse clicks and using touch screens.

My required cause and affect as follows:

I'm using the same button to change a varibale from true to false, then press the same button again it reverts the var from false back to true. So in essence I'm using a single button to latch on, then press it again and it latches off.

In the code sample below, I am changing the style of the button based upon what mode it has been set to.

HTML:

<button class="btn btn-outline-secondary ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Draw Connector" id="drawConnectorModeButton" data-bs-animation="false">
    <i class="fa-solid fa-highlighter-line fa-lg"></i>
</button>

JavaScript:

// Remove the blur from the bootsrtap buttons once released.
$(".btn").mouseup(function () {
    $(this).blur();
})

var drawConnectorModeActive = false;

$('#drawConnectorModeButton').on('click touchend', function (e) {
    e.preventDefault();
    $('#drawConnectorModeButton').tooltip('hide');
    if (drawConnectorModeActive == true) { // Off
        $('#drawConnectorModeButton').removeClass('btn-secondary').addClass('btn-outline-secondary');
        drawConnectorModeActive = false;
    } else { // On
        $(this).blur();
        $('#drawConnectorModeButton').removeClass('btn-outline-secondary').addClass('btn-secondary');
        drawConnectorModeActive = true;
    }
});