En los dispositivos táctiles, los siguientes eventos se activan al tocar un elemento:

• Inicio táctil
• punto de contacto
• ratónenter
• ratón hacia abajo
• ratón arriba
• hacer clic

Los eventos mouseenter, mousedown, mouseup y click son emulados por el evento touchend. Si desea deshabilitar esta emulación de eventos del mouse, puede usar preventDefault().

Pero si en iOS Safari toco los bordes de un elemento, se desencadenan los siguientes eventos:

• ratónenter
• ratón hacia abajo
• ratón arriba
• hacer clic

De alguna manera, los eventos táctiles no se activan en los bordes y, por eso, tampoco puedo usar preventDefault() para detener la emulación de los eventos del mouse.

El problema ocurre tanto en iPhone como en iPad.

Busqué Stack Overflow y Google, pero no puedo encontrar nada al respecto. Sin errores y sin soluciones. ¿Alguien sabe si se trata de un error conocido en Safari?

Creé el código más básico para reproducir este error en JSFiddle :

HTML:

 <div id="element"></div> <div id="log"></div>

CSS:

 #element { height: 100px; width: 100px; background: yellow; margin: 20px; }

JavaScript:

 function handler(event) { const log = document.getElementById('log'); log.innerHTML = `${event.type}<br />${log.innerHTML}`; } const element = document.getElementById('element'); element.addEventListener('mouseenter', handler); element.addEventListener('mouseleave', handler); element.addEventListener('mousedown', handler); element.addEventListener('mouseup', handler); element.addEventListener('click', handler); element.addEventListener('focus', handler); element.addEventListener('blur', handler); element.addEventListener('touchstart', handler); element.addEventListener('touchend', handler);