Tengo un formulario descartable en el que necesito mostrar la confirmación de descartar antes de cerrarlo.
const button = document.getElementsByTagName('button')[0]; const textarea = document.getElementsByTagName('textarea')[0]; button.addEventListener('click', () => { button.classList.add('hidden'); textarea.classList.remove('hidden'); textarea.focus(); }); textarea.addEventListener('keyup', (e) => { if (e.key !== 'Escape') return; if (!confirm('Are you sure you want to close ?')) return; button.classList.remove('hidden'); textarea.classList.add('hidden'); }); .hidden { display: none; } <button type="button">Edit</button> <textarea class="hidden"></textarea> El formulario (representado por el área de texto) se puede cerrar con la tecla escape.
Pero esta tecla de escape también controla el diálogo de confirmación y se propaga a mi controlador.
Entonces cierra el cuadro de diálogo de confirmación y luego lo vuelve a abrir.
¿Hay alguna manera de evitar la propagación del evento de escape desde el cuadro de diálogo de confirmación al área de texto?
Agregué un indicador que almacenará el hecho de que realmente salió del cuadro de diálogo para que cuando el evento se active nuevamente, la próxima vez use el indicador para regresar desde el controlador:
const button = document.getElementsByTagName('button')[0]; const textarea = document.getElementsByTagName('textarea')[0]; button.addEventListener('click', () => { button.classList.add('hidden'); textarea.classList.remove('hidden'); textarea.focus(); }); let dialogWasRefused = false; textarea.addEventListener('keyup', (e) => { if(dialogWasRefused){ dialogWasRefused = false; return; } if (e.key !== 'Escape') return; if (!confirm('Are you sure you want to close (real message not from the fiddle platform) ?')) { dialogWasRefused = true; return; } button.classList.remove('hidden'); textarea.classList.add('hidden'); }); .hidden { display: none; } <button type="button">Edit</button> <textarea class="hidden"></textarea>