Nuestra aplicación web interna utiliza onblur para capturar la entrada del usuario y onmouseup para actuar en consecuencia. Tuvimos problemas con el evento onblur que no siempre se activaba antes de onclick, así que lo cambié a onmouseup (aunque parece que onclick se puede combinar con onfocus para garantizar onblur).
Cuando renderizamos nuestro contenido web en una tableta, usamos ontouchstart, que funciona bien, pero ninguna de las técnicas que usé para garantizar que el activador onblur funcione antes del onmouseup. Puedo solucionar el problema agregando el script onblur como parte de onmouseup, pero preferiría no hacerlo, ya que el clic es para una acción genérica de 'Guardar'.
Este fragmento de código funciona bien con cualquiera de los dispositivos táctiles simulados de Chrome. Si se toca 'Click me' justo después de una entrada de cadena, la salida del registro de la consola es...
Gracias por cualquier sugerencia.
<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>Se arregló mi caso usando un objeto Diferido con when().done() La aplicación que admito hace que sea difícil consolidar los scripts de hacer clic y desdibujar en uno, lo que lo hubiera facilitado. En su lugar, estoy usando un objeto diferido global (con mucho código de utilidad envuelto alrededor de él). De esta manera, la última acción de ontouchstart ocurre después de onblur, según sea necesario.
<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>