it-swarm.com.de

Standardkontextmenü bei langem Drücken/langem Klicken in mobiler Safari (iPad/iPhone) verhindern

Für eine Website möchte ich ein benutzerdefiniertes Kontextmenü anzeigen, wenn ein Benutzer den Bildschirm "drückt". Ich habe in meinem Code einen jQuery Longclick listener erstellt, um ein benutzerdefiniertes Kontextmenü anzuzeigen. Das Kontextmenü wird angezeigt, das Standardkontextmenü des iPad wird jedoch auch angezeigt! Ich habe versucht, dies zu verhindern, indem ich dem Ereignis in meinem Listener ein preventDefault() hinzufügte. Dies funktioniert jedoch nicht:

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

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

Fragen

  1. Können Sie verhindern, dass das Standard-Kontextmenü des iPad angezeigt wird?
  2. Kann es mit dem jQuery Longclick Plugin gemacht werden?

Das Longclick-Plugin hat eine bestimmte Handhabung für das iPad (vorausgesetzt, es handelt sich um einen Ausschnitt aus Quellcode ):

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

Ich gehe also davon aus, dass dies meine zweite Frage beantwortet (vorausgesetzt das Plugin hat das richtige Ereignis verwendet).

28
Jasper de Vries

Danke an JDandChips für Zeigen me an die Lösung. Es funktioniert perfekt in Kombination mit dem Longclick-Plugin. Zur Dokumentation werde ich meine eigene Antwort posten, um zu zeigen, was ich getan habe.

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>

Das Javascript war bereits in Ordnung:

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

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

Das Update bestand darin, diese Regeln zum Stylesheet hinzuzufügen:

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

Deaktiviertes Kontextmenü example .


Update: Das jQuery Longclick Plugin scheint nur in Safari auf dem iPad zu funktionieren, nicht in Google Chrome! Ich untersuche das momentan.


Update 2: Ich habe das Longclick-Javascript in die Quelle von Fiddle eingebettet, da in Chrome (aufgrund von https) die folgende Fehlermeldung angezeigt wurde:

Das Skript von ' https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js ' wurde nicht ausgeführt, da der MIME-Typ ('text/plain') nicht ausführbar ist, und Die strenge MIME-Typüberprüfung ist aktiviert.

Siehe die aktualisierte Version: http://jsfiddle.net/z9ZNU/53/

24
Jasper de Vries
<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>

Wenn Sie nur das Ankertasten-Tag deaktivieren möchten, verwenden Sie Folgendes:

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

Eine schnelle CSS-Lösung:

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

benutzerauswahl deaktiviert das Hervorheben von Text/Bereichen.
touch-callout deaktiviert das Kontextmenü.

8
Federico

Ich habe kein iPad, konnte also keine Lösung testen, aber ich bin auf eine ähnliche Frage gestoßen, die gelöst wurde. Ich weiß nicht, ob es Ihnen helfen wird, aber hier ist der Link: Deaktivieren des Standardverhaltens eines Ankers in jQuery Mobile (iOS)

2
JDandChips

Sie müssen sich nicht auf -webkit--Eigenschaften verlassen.

Wenn es sich bei Ihrem Link um einen Javascript-Aufruf handelt, ist es so einfach, die href="void(0)" vollständig zu entfernen! Ihre ontouchend- oder onclick-Attribute funktionieren weiterhin. Wenn der Link originell aussehen soll, fügen Sie folgende CSS hinzu:

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

Dies wird viel reibungsloser ablaufen, insbesondere wenn es hunderte von Links auf der Seite gibt.

Sie können dies auch auf "echte" Seitenlinks um den Preis eines SEO-Verlusts erweitern:

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

Für die meisten Websites ist dies nicht unbedingt empfehlenswert, aber für eine spezifische mobile-freundliche Situation (mobile Web-App) kann dies entscheidend sein.

Viel Spaß beim Codieren!

1
Aaron Gillion

Dieses Github-Repository funktioniert für mich. In meinem Fall schreibe ich eine iPad-App mit UIWebView.

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

JavaScript muss nicht verwendet werden. Es kann mit CSS ausgeführt werden.

Verwenden Sie img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; }, Um das Kontextmenü nur für Bilder zu deaktivieren.

Wenn wir das Kontextmenü für bestimmte Klassen deaktivieren müssen, verwenden Sie .className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; }

0
Pranav K