onclick blocks copy + paste en Mobile Safari?

Antecedentes: Tengo un menú desplegable que básicamente funciona igual que el descrito en this other Mobile Safari Event Issue question: haga clic en un elemento de menú para mostrar el menú desplegable o haga clic en cualquier otro elemento de la página para ocultar el menú. El jQuery que oculta el menú desplegable está vinculado al evento click de uno de los padres <div> que abarca toda la ventana. Este menú desplegable funciona A-OK en todos los navegadores, incluido Mobile Safari, y solo lo estoy describiendo aquí por el bien del contexto.onclick blocks copy + paste en Mobile Safari?

El problema: este evento onclick impide que los usuarios de Mobile Safari (probado en un iPod Touch 4.2.1 y iPad 4.3.5) obtengan la operación normal de tocar y mantener Copiar | Pegar ventana emergente en cualquier lugar de nuestro sitio. D'oh! Según mi investigación, parece que si un elemento HTML tiene definido un manejador de clics, ¿su contenido contenido no se podrá copiar?

He creado una demo despojada aquí (Actualización: estoy usando JavaScript recta en esta demostración para ilustrar que no es un tema de jQuery, pero esto no funciona con .click de jQuery() como bien): http://adamnorwood.com/ios-copypaste.html

Si abre ese enlace en Mobile Safari, no debería poder copiar el texto lorem ipsum, pero recibirá un mensaje a través de console.log() cuando haga clic en el texto para probar que el controlador de clic está disparando.

Aquí está la esencia de la misma, en caso de que enlace se cae:

<div id="content">Imagine a large block of text here...</div> 
<script> 
    document.getElementById('content').onclick = function() { 
     console.log('You just clicked me!'); 
    } 
</script>

cosas I han intentado:

-webkit-user-select: text como described here
utilizando onmouseup y otros eventos en lugar de onclick (nope).
mover el onclick a la etiqueta <body> o al objeto de ventana
Figura 6-4 en la iOS Handling Events documentation es relevante, pero no me lleva a ninguna grandes revelaciones acerca de qué hacer ...

¿Alguna idea? ¿Es esta la manera en que se supone que funciona, o me estoy perdiendo algo? ¿Hay alguna manera de hacer que este texto sea seleccionable, y aun así disparar el controlador de clic? O tal vez debería volver a la mesa de dibujo sobre cómo ocultar mejor el menú desplegable para evitar este problema por completo.

Fuente

2011-08-11 Adam Norwood

Este problema es particularmente malo si usa la delegación de eventos. Si tuviera que, por ejemplo, usar $ ('body'). Delegado de jquery (".myclickable '," click ", function() {...}), entonces no se seleccionaría texto en la página entera en iOS. Mi solución fue agregar ineficazmente manejadores de clics a cada uno de los enlaces que me interesan (también en un menú desplegable de texto mixto y enlace). –

Aha, después de poner este problema en el quemador remoto durante un par de semanas, una solución vino a la mente de repente (al menos esto parece funcionar a primera vista). En lugar de utilizar .onclick() (o jQuery de .click()) para esto, Mobile Safari puede hacer un mejor uso del manipulador touchstart evento:

<div id="content">Imagine a large block of text here...</div> 
<script> 
    document.addEventListener('touchstart', function() { 
     console.log('Yay, you clicked the text, and you can still copy-and-paste!'); 
    }, false); 
</script>

Con este código en su sitio, en el menú desplegable en mi caso ejemplo es capaz de estar oculto al hacer clic en cualquier otro lugar del documento, Y aún puedo acceder a la copia estándar de iOS | Pega burbujas cuando mantienes presionado el texto (el comportamiento normal deseado). Mobile Safari obtiene el oyente 'touchstart', otros navegadores obtienen 'onclick'. No me gusta tener que poner este tipo de navegador olfateando en su lugar, pero resuelve el problema. A menos que exista una razón por la que escuchar esto como un evento de inicio con una tecla sea un problema, lo marcaré como respondido.

Fuente

2011-08-31 21:34:42

Esto funciona, pero la desventaja es que cerrará el menú cuando los usuarios se desplacen por la página (tal vez para acceder a parte de su menú que no pueden ver de otra manera), o acercar/alejar (tal vez para ver mejor t el resto del menú). Lo ideal es que esos gestos no hagan que el menú se cierre. Dicho esto, tampoco he encontrado una mejor manera de hacerlo. – avernet

El 'mousedown' de evento también rompe el menú copiar/pegar. ¿Qué es un reemplazo para esto? – Dmitry

¿Has probado jQuery? jQuery parece funcionar para mí en mis sitios web en Mobile Safari.

Aquí hay un código de jQuery que usted podría intentar:

<div id="content">Imagine a large block of text here...</div> 
<script type="text/javascript"> 
    $('#content').click(function() { 
     console.log('You just clicked me!'); 
    }); 
</script>

asegúrese de incluir el enlace al archivo de jQuery en sus etiquetas <head></head> si no lo ha hecho.

También probé su ejemplo en mi iPhone y tienes razón no copia simplemente pone de manifiesto que cuando mantenga el dedo hacia abajo en él:

iPhone screenshot

Pero, el camino podría jQuery trabajo.

Fuente

2011-08-11 21:00:53 Nathan

¡Gracias por probarlo! Debería haber dejado más claro que probé esto con tanto .click() de jQuery como con el JavaScript directo (AFAIK deberían funcionar de la misma manera) - He actualizado mi pregunta para reflejar eso. –

No hay problema. Parece que el onclick lo está haciendo clickeable Por algún motivo, Mobile Safari cree que cuando agrega el onclick, se supone que es un enlace. – Nathan

onclick blocks copy + paste en Mobile Safari?

Respuesta

Cuestiones relacionadas