Soy consciente de que no existen eventos nativos para select al abrir/cerrar. Estoy usando select.mousedown y document.mouseup como se sugiere en esta respuesta , y funcionan bien en el escritorio. Sin embargo, no funcionan como se esperaba en dispositivos móviles: cuando se abre la select , tanto select.mousedown como document.mouseup se disparan, y cuando se cierran, no se disparan.
Aquí está el código (y jsfiddle ): para reproducir el problema, abra devtools y luego el emulador de dispositivo (como iPhone 6):
const select = document.getElementById("select") select.addEventListener('mousedown', e => { console.log('select mousedown') }) document.addEventListener('mouseup', e => { console.log('document mouseup') }) <select id="select"> <option value="1" data-label="One">1</option> <option value="2" data-label="Two">2</option> <option value="3" data-label="Three">3</option> <option value="4" data-label="Four">4</option> </select> También experimenté con otros eventos tratando de capturar el momento en que se cierra la select : select.blur , document.click , select.mouseleave , etc., pero ninguno se activa en dispositivos móviles. Aquí hay un jsfiddle más extenso : abra el emulador de dispositivo, abra el cuadro de selección y luego ciérrelo (ya sea haciendo clic o en el cuadro mismo), no se activan eventos.
También traté de cubrir la página con una superposición invisible; el problema es que parece que no puedo "filtrar" el evento de clic desde la superposición hacia abajo para select (probé document.elementFromPoint(e.clientX, e.clientY).click() dentro overlay.click ), o si aplico pointer-events: none , entonces la superposición no recibe el clic, solo la select lo hace.
¿Hay alguna forma de escuchar eventos select de apertura/cierre en el móvil? Gracias
desafortunadamente no hay un evento estándar para seleccionar abrir y cerrar
una forma es crear un menú desplegable personalizado, como uno propuesto por bootstrap https://getbootstrap.com/docs/4.0/components/dropdowns/#events con este, tiene más eventos activados por el componente cuando está abierto o cerrado
el código proviene del documento
<div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger </button> <div class="dropdown-menu" aria-labelledby="dLabel"> ... </div> </div> $('#myDropdown').on('show.bs.dropdown', function () { // do something… })Estos son los eventos que necesita para lograr el comportamiento deseado.
const select = document.getElementById("select") select.addEventListener('focusin', e => { console.log('using select') }) document.addEventListener('focusout', e => { console.log('no longer working on select') }) document.addEventListener('change', e => { console.log('chose a value') }) <select id="select"> <option value="1" data-label="One">1</option> <option value="2" data-label="Two">2</option> <option value="3" data-label="Three">3</option> <option value="4" data-label="Four">4</option> </select>