web-dev-qa-db-fra.com

Pourquoi l'événement de flou n'est-il pas déclenché dans iOS Safari Mobile (iPhone/iPad)?

J'ai deux gestionnaires d'événements liés à une balise d'ancrage: un pour la mise au point et le flou.

Les gestionnaires se déclenchent sur le bureau, mais dans iphone et ipad, seul le focus est déclenché correctement. Le flou n'est pas déclenché si je clique en dehors de la balise d'ancrage (le flou n'est déclenché que lorsque je clique sur d'autres éléments de formulaire de la page):

    $("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>
javascriptiphonehtmliosipad
16
Mohamed Hussain

Si un événement est associé à un ancre, le premier appui sur celui-ci dans iOS provoque son ancrage et sa mise au point. Un tap away élimine l'état de survol, mais le lien reste concentré. C'est par conception. Pour contrôler correctement une application sur iOS, vous devez implémenter des événements tactiles et réagir à ceux-ci au lieu de ceux du bureau.

Il existe un guide complet sur l'utilisation des événements Javascript dans WebKit sur iOS .

9
Nicholas Shanks

C'est un hack, mais vous pouvez faire en sorte que .blur se déclenche en enregistrant un gestionnaire de clics sur chaque élément DOM. Cela supprime le focus de l'élément précédemment ciblé.

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

La deuxième ligne supprime la surbrillance lorsque des éléments sont cliqués.

Je sais que cela n’est pas optimal, mais cela peut vous aider.

4
Dan Torrey

Si vous travaillez avec des appareils tactiles, vous pouvez utiliser l'événement touchleave ou touchend pour le gérer lorsque l'utilisateur clique en dehors de la zone.

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

Pour que cela fonctionne, vous devez mettre à jour votre fonction de focus afin d’écouter un événement sur click comme suit:

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

dans le plus large div

<div onclick='click()'>

puis en javascript

function click(){}
0
Sam