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...
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>
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>