How to ensure onblur event before ontouchstart

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…

  1. focus
  2. ontouchstart
  3. onblur

Thanks for any suggesions.

<html>
<body>
    <div>
        <input id="input" onblur="
            console.log('onblur');
            document.getElementById('output').innerHTML = document.getElementById('input').value">
        </id>
        <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>