it-swarm.com.de

Warum wird das Weichzeichnungsereignis in iOS Safari Mobile (iPhone/iPad) nicht ausgelöst?

Ich habe zwei Ereignishandler, die an ein Ankertag gebunden sind: einen für Fokus und Unschärfe.

Die Handler werden auf dem Desktop ausgelöst, aber auf dem iPhone und iPad wird nur der Fokus korrekt ausgelöst. Unschärfe wird nicht ausgelöst, wenn ich außerhalb des Ankertags klicke (Unschärfe wird nur ausgelöst, wenn ich auf andere Formularelemente auf der Seite klicke):

    $("a").focus(function(){
        console.log("focus fired");
    });

    $("a").blur(function(){
        console.log("blur fired");
    }); 

HTML:

<html>
<form>
    <a href="#">test link</a>
    <div>
    <input type="text" title="" size="38" value="" id="lname1" name="" class="text">
    </div>
    <div style="padding:100px">
        <p>test content</p>
    </div>
</form>
</html>
16
Mohamed Hussain

Wenn einem Anker Ereignisse zugeordnet sind, wird der Anker beim ersten Tippen in iOS in den Hover-Status versetzt und fokussiert. Ein Tippen entfernt den Hover-Status, der Link bleibt jedoch fokussiert. Dies ist beabsichtigt. Um eine Anwendung unter iOS ordnungsgemäß zu steuern, müssen Sie touchbasierte Ereignisse implementieren und auf diese reagieren, anstatt auf Desktop-Ereignisse.

Es gibt eine vollständige Anleitung zur Verwendung von Javascript-Ereignissen in WebKit unter iOS .

9
Nicholas Shanks

Es ist ein Hack, aber Sie können .blur auslösen, indem Sie für jedes DOM-Element einen Klick-Handler registrieren. Dadurch wird der Fokus vom zuvor fokussierten Element entfernt.

$( '*' ).click( function ( ) { } );
$( 'html' ).css( "-webkit-tap-highlight-color", "rgba(0, 0, 0, 0)" );

Die zweite Zeile entfernt die Markierung, wenn auf Elemente geklickt wird.

Ich weiß, dass dies nicht optimal ist, aber es kann Sie dazu bringen, sich zu bewegen.

4
Dan Torrey

Wenn Sie mit Touch-Geräten arbeiten, können Sie das Ereignis touchleave oder touchend verwenden, wenn ein Benutzer außerhalb des Bereichs klickt.

$("a").on('touchleave touchcancel', function () {
      // do something
});

Damit dies funktioniert, müssen Sie Ihre Fokusfunktion aktualisieren, um wie folgt auf ein Ereignis auf click zu warten

$("a").on("click", function (e) {
      if(e.handled !== true) {
            e.handled = true
      } else {
            return false
      }
      // do something
 })
2
Andrew

im äußersten div

<div onclick='click()'>

dann in Javascript

function click(){}
0
Sam