Prevención del menú contextual predeterminado en longpress/longclick en el dispositivo móvil Safari (iPad/iPhone)

Question

Para un sitio web, quiero mostrar un menú contextual personalizado cuando un usuario "presiona largamente" la pantalla. Creé un oyente jQuery Longclick en mi código para mostrar un menú contextual personalizado. Se muestra el menú contextual, pero también se muestra el menú contextual predeterminado del iPad. Traté de evitar esto mediante la adición de un preventDefault() al evento en mi oyente, pero esto no funciona:

function showContextMenu(e){ 
    e.preventDefault(); 
    // code to show custom context menu 
} 

$("#myId").click(500, showContextMenu); 

Preguntas

1. Se puede prevenir menú de contexto por defecto del iPad para mostrar?
2. ¿Se puede hacer mediante el uso del complemento jQuery Longclick?

---

El plugin Longclick tiene un manejo específico para el iPad (suponiendo por este fragmento de it's source code):

if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){ 
    $(this) 
    .bind(_mousedown_, schedule) 
    .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul) 
    .bind(_click_, click) 
} 

así que supongo que esto responde a la segunda pregunta (suponiendo que el plug-in utiliza la correcta evento).

Answer 1

Gracias a JDandChips por pointing a la solución. Funciona perfectamente en combinación con el complemento longclick. Por motivos de documentación, publicaré mi propia respuesta para mostrar lo que hice.

HTML:

<script type="text/javascript" 
     src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script> 

<p><a href="http://www.google.com/">Longclick me!</a></p> 

el código JavaScript que ya estaba bien:

function longClickHandler(e){ 
    e.preventDefault(); 
    $("body").append("<p>You longclicked. Nice!</p>"); 
} 

$("p a").longclick(250, longClickHandler); 

La solución fue añadir estas reglas a la hoja de estilo:

body { -webkit-touch-callout: none !important; } 
a { -webkit-user-select: none !important; } 

Disabled context menu example.

---

actualización: jQuery Longclick el complemento parece funcionar sólo en Safari en el iPad, no en Google Chrome! Estoy investigando eso en este momento.

---

Actualización 2: He insertado el Longclick Javascript en el origen del violín porque estaba recibiendo el siguiente error en Chrome (debido a https):

se negó a ejecutar un script de 'https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js' porque su tipo MIME ('text/plain') no es ejecutable y está habilitada la comprobación estricta del tipo MIME.

Ver la versión actualizada: http://jsfiddle.net/z9ZNU/53/

Answer 2

No tengo un iPad, por lo que no pude probar una solución, pero me encontré con una pregunta similar, que se resolvió. No sé si será de alguna ayuda para usted, pero aquí está el enlace: How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

Answer 3

Una solución rápida css:

html { 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
} 

desactiva de selección de usuario resaltar el texto/áreas.
llamada táctil deshabilita el menú contextual emergente.

Answer 4

<style type="text/css"> 
*:not(input):not(textarea) { 
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */ 
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ 
}  
</style> 

Si desea desactivar la etiqueta sólo botón de ancla uso esto:

a { 
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */ 
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ 
} 

Answer 5

No hay necesidad de confiar en -webkit- propiedades.

Si su enlace es una llamada de Javascript, ¡es tan fácil como eliminar por completo el href="void(0)"! Sus atributos ontouchend o onclick seguirán funcionando. Si desea que el enlace a su aspecto original, añadir este CSS:

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; } 

Esto ejecutará mucho más suave, especialmente cuando hay cientos de enlaces en la página.

También puede extender esto a los "reales" página de enlaces a costa de la pérdida de SEO:

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a> 

No es exactamente una buena práctica para la mayoría de sitios web, pero para una situación específica para dispositivos móviles (Mobile aplicación web) esto puede ser crucial.

Happy coding!

Answer 6

Este repositorio github funciona para mí. En mi caso, escribo una aplicación para iPad usando UIWebView.

https://github.com/vaidik/jquery-longpress