How to ensure onblur event before ontouchstart

Question

Our in-house web app uses onblur to capture user input and onmouseup to act on it. We had problems with the onblur event not always triggering before onclick, so I changed that to onmouseup (although, it would seem that onclick can be combined with onfocus to ensure the onblur).

When rendering our web content on a tablet we use ontouchstart which works well, but none of the techniques I used to ensure the onblur trigger before the onmouseup work. I can fix the problem by adding the onblur script as part of the onmouseup, but I'd prefer not to, since the click is for a generic 'Save' action.

This code snippet works well with any of Chrome's simulated touch enabled devices. If 'Click me' is touched right after a string input, the console log output is...

focus
ontouchstart
onblur

Thanks for any suggestions.

<html>
<body>
    <div>
        <input id="input" onblur="
            console.log('onblur');
            document.getElementById('output').innerHTML = document.getElementById('input').value">
        </input>
        <div id="output">No Data</div>
        <div id="click" ontouchstart="
            document.getElementById('output').focus(console.log('focus'));
            console.log('ontouchstart'); 
            document.getElementById('output').innerHTML = 'ontouchstart' ">
            Click me
        </div>
    </div>
</body>
</html>

score 0 · Accepted Answer · answered May 30 '22 at 18:06

Fixed my case by using a Deferred object with when().done() The application I'm supporting makes it hard to consolidate the click and onblur scripts into one, which would have made this easy. Instead I'm using a global Deferred object (with lots of utility code wrapped around it). This way the last action of the ontouchstart happends after the onblur, as required.

<html>
<body>
    <div>
        <input id="input" onblur="
            console.log('onblur');
            document.getElementById('output').innerHTML = document.getElementById('input').value;
            deferred.resolve('done')">
        </input>
        <div id="output">No Data</div>
        <div id="click" ontouchstart="
            console.log('ontouchstart'); 
            $.when(deferred).done(
                function() {
                    console.log('done'); 
                    document.getElementById('output').innerHTML = 'ontouchstart'})">
            Click me
        </div>
    </div>
</body>
</html>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> 

<script>
    var deferred = $.Deferred();
</script>

How to ensure onblur event before ontouchstart

1 Answers1