onclick blockiert kopieren + einfügen auf Mobile Safari?
Hintergrund: Ich habe ein Dropdown-Menü, das im Prinzip genauso funktioniert wie das auf Diese andere Frage zu Mobile Safari-Ereignisproblemen : Klicken Sie auf ein Menüelement, um das Dropdown-Menü anzuzeigen. Klicken Sie entweder erneut auf das Menüelement, oder klicken Sie an eine beliebige Stelle auf der Seite, um das Menü auszublenden. Die jQuery, die das Dropdown-Menü verbirgt, ist an das click -Ereignis eines übergeordneten <div> gebunden, das das gesamte Fenster umfasst. Dieses Dropdown-Menü funktioniert in allen Browsern, einschließlich Mobile Safari, und ich beschreibe es hier nur aus Gründen des Kontextes.
Das Problem: Dieses Onclick-Ereignis verhindert, dass Benutzer von Mobile Safari (auf einem iPod Touch 4.2.1 und iPad 4.3.5 getestet) das normale Touch-and-Hold-Kopieren | Einfügen Popup irgendwo auf unserer Website. Oh! Basierend auf meinen Recherchen scheint es, dass, wenn ein HTML-Element einen Click-Handler definiert hat, sein enthaltener Inhalt nicht kopierbar sein kann?
Ich habe hier eine abgespeckte Demo eingerichtet ( Update: ) Ich verwende gerade JavaScript in dieser Demo, um zu verdeutlichen, dass es sich hierbei nicht um ein jQuery-Problem handelt, das jedoch nicht mit jQuery funktioniert. klicke () auch: Ссылка
Wenn Sie diesen Link in Mobile Safari öffnen, sollten Sie den lorem ipsum-Text nicht kopieren können. Sie erhalten jedoch eine Meldung über console.log (), wenn Sie auf den Text klicken, um zu bestätigen, dass der Click-Handler vorhanden ist feuern.
Hier ist der Kern davon, falls die Verbindung abbricht:
%Vor%Dinge, die ich versucht habe:
-
-webkit-user-select: textals hier beschrieben -
mit onmouseup und anderen Ereignissen statt onclick (nein).
-
Bewegen Sie den onclick zum
<body>-Tag oder zum Fensterobjekt -
Abbildung 6-4 in den iOS-Behandlungsereignissen Dokumentation ist relevant, aber führte mich nicht zu großen Enthüllungen darüber, was zu tun ist ...
Irgendwelche Gedanken? Ist das so, wie es funktionieren soll, oder fehlt mir etwas? Gibt es eine Möglichkeit, diesen Text auswählbar zu machen und dennoch den Click-Handler auszulösen? Oder vielleicht sollte ich zurück zum Zeichenbrett gehen, um das Dropdown-Menü zu verstecken, so dass ich dieses Problem vollständig vermeide?
2 Antworten
Aha, nachdem ich dieses Problem ein paar Wochen lang auf den hinteren Herd gestellt hatte, kam mir plötzlich eine Lösung in den Sinn (zumindest scheint das auf den ersten Blick zu funktionieren). Anstatt dafür .onclick() (oder jQuerys .click() ) zu verwenden, kann Mobile Safari den touchstart -Ereignishandler besser nutzen:
Mit diesem Code kann das Dropdown-Menü in meinem Beispielfall ausgeblendet werden, indem irgendwo anders auf das Dokument geklickt wird, UND ich kann immer noch auf die Standard iOS Kopie | Blase einfügen, wenn man den Text drückt und hält (das gewünschte normale Verhalten). Mobile Safari erhält den 'touchstart' Listener, andere Browser erhalten 'onclick'. Ich mag es nicht, diese Art von Browser-Sniffing an Ort und Stelle zu setzen, aber es löst das Problem. Es sei denn, es gibt einen Grund dafür, dass das Zuhören als Touchstart-Ereignis ein Problem ist. Ich werde dies als beantwortet markieren.
Haben Sie jQuery ausprobiert? jQuery scheint für mich auf meinen Websites in Mobile Safari zu funktionieren.
Hier ist ein jQuery-Code, den Sie ausprobieren könnten:
%Vor% Stellen Sie sicher, dass Sie den Link zur jQuery-Datei in Ihre <head></head> -Tags aufnehmen, falls Sie dies noch nicht getan haben.
Ich habe auch dein Beispiel auf meinem iPhone ausprobiert und du hast recht, es kopiert es nicht, es hebt es nur hervor, wenn ich meinen Finger darauf halte:
Aber der jQuery-Weg könnte funktionieren.
Tags und Links javascript jquery iphone ios mobile-safari