Question 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 le focus 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 ne se déclenche 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>

14
2017-11-21 12:06


origine


Réponses:


Si une ancre est associée à des événements, la première pression sur celle-ci provoque la mise en stationnaire de l'ancre et sa focalisation. Un tap out supprime 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 plutôt qu'à ceux du bureau.

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


7
2017-11-21 12:13



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 focalisé.

$( '*' ).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 c'est sous-optimal, mais cela peut vous faire avancer.


4
2017-07-29 19:31



Si vous travaillez avec des appareils tactiles, vous pouvez utiliser le touchleave ou toucher événement à 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 mise au point pour écouter Cliquez sur événement comme suit

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

2
2018-01-19 11:39



dans le plus div

<div onclick='click()'>

puis en javascript

function click(){}

1
2018-02-17 08:27