Vérifier si l'événement est déclenché par un humain

140

J'ai un gestionnaire attaché à un événement et je voudrais qu'il s'exécute uniquement s'il est déclenché par un humain, et non par une méthode trigger (). Comment faire la différence?

Par exemple,

$('.checkbox').change(function(e){
  if (e.isHuman())
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change'); //doesn't alert
Dziamid
la source

Réponses:

212

Vous pouvez vérifier e.originalEvent: s'il est défini, le clic est humain:

Regardez le violon http://jsfiddle.net/Uf8Wv/

$('.checkbox').change(function(e){
  if (e.originalEvent !== undefined)
  {
    alert ('human');
  }
});

mon exemple dans le violon:

<input type='checkbox' id='try' >try
<button id='click'>Click</button>

$("#try").click(function(event) {
    if (event.originalEvent === undefined) {
        alert('not human')
    } else {
        alert(' human');
    }


});

$('#click').click(function(event) {
    $("#try").click();
});
Nicola Peluchetti
la source
1
@Nicola Est-ce documenté quelque part?
Šime Vidas le
@Sime je ne sais pas, mais je pense que c'est standard. regardez ici: api.jquery.com/category/events/event-object
Nicola Peluchetti
@Nicola Je vois, c'est un truc jQuery. jQuery stocke l'objet événement d'origine dans cette propriété. Btw, que voulez-vous dire que vous ne savez pas? Vous venez de fournir le lien vers la documentation:)
Šime Vidas
1
On dirait que vous pouvez également utiliserevent.isTrigger
avoliva
1
@Anurag, je rencontrais le même problème tout à l'heure. Il semble que jQuery se remplit originalEventlorsque l'événement est déclenché par DOM.click(), mais vous pouvez l'utiliser $($("#try")[0]).click();, ce qui est maladroit, mais fonctionne.
Daniel Garrett
19

Plus simple que ci-dessus serait:

$('.checkbox').change(function(e){
  if (e.isTrigger)
  {
    alert ('not a human');
  }
});

$('.checkbox').trigger('change'); //doesn't alert
Kenneth Spencer
la source
C'est la meilleure réponse. Pour l'explication, voir: stackoverflow.com/questions/10704168/…
jaredjacobs
3
Bien que cela soit tentant et probablement confortable dans la pratique, notez que les développeurs jQuery ne souhaitent pas passer isTriggerà l'API publique à partir de ce moment .
Jon
7

Je pense que le seul moyen de le faire serait de passer un paramètre supplémentaire sur l' triggerappel selon la documentation .

$('.checkbox').change(function(e, isTriggered){
  if (!isTriggered)
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change', [true]); //doesn't alert

Exemple: http://jsfiddle.net/wG2KY/

detaylor
la source
1
vous pouvez consulter la propriété originalEvent de l'objet événement: si l'événement ne provient pas d'un clic, il est indéfini
Nicola Peluchetti
1
Pour une raison quelconque, event.originalEvent ne fonctionnait pas pour moi (je continuais juste de returing 1) lors de l'utilisation du gestionnaire de «clic» de Zepto. J'ai donc essayé la solution ci-dessus. A travaillé comme un charme.
Larrydx le
7

La réponse acceptée n'a pas fonctionné pour moi. Cela fait 6 ans et jQuery a beaucoup changé depuis.

Par exemple, event.originalEventrenvoie toujours trueavec jQuery 1.9.x. Je veux dire que l'objet existe toujours mais le contenu est différent.

Ceux qui utilisent des versions plus récentes de jQuery peuvent essayer celui-ci. Fonctionne sur Chrome, Edge, IE, Opera, FF

if ((event.originalEvent.isTrusted === true && event.originalEvent.isPrimary === undefined) || event.originalEvent.isPrimary === true) {
    //Hey hooman it is you
}
Ergec
la source
3

Actuellement, la plupart des navigateurs prennent en charge l' événement .

if (e.isTrusted) {
  /* The event is trusted: event was generated by a user action */
} else {
  /* The event is not trusted */
}

À partir de la documentation :

La propriété en lecture seule isTrusted de l' Eventinterface est a Boolean qui est true lorsque l'événement a été généré par une action utilisateur et false lorsque l'événement a été créé ou modifié par un script ou distribué via EventTarget.dispatchEvent () .

Felipsmartins
la source
0

Vous pouvez utiliser onmousedown pour détecter un clic de souris ou un appel trigger ().

boateng
la source
Je ne peux pas travailler sur le scénario suivant: Il est parfois possible de sélectionner les éléments de la page à l'aide de la touche Tab. Par exemple, si j'ai sélectionné de cette manière une case à cocher, je peux cocher / décocher en utilisant la touche espace. Ou même ouvrez un drodpdown en utilisant la touche fléchée vers le bas.
Diego Favero
0

Je penserais à une possibilité où vous vérifiez la position de la souris, comme:

  • Cliquez sur
  • Obtenir la position de la souris
  • Chevauche les coordonnées du bouton
  • ...
Luke
la source
Je ne peux pas travailler sur le scénario suivant: Il est parfois possible de sélectionner les éléments de la page à l'aide de la touche Tab. Par exemple, si j'ai sélectionné de cette manière une case à cocher, je peux cocher / décocher en utilisant la touche espace. Ou même ouvrez un drodpdown en utilisant la touche fléchée vers le bas.
Diego Favero
0

Incase vous avez le contrôle de tout votre code, pas d'appels extraterrestres $(input).focus()que setFocus().

Utiliser une variable globale est un moyen correct pour moi.

var globalIsHuman = true;

$('input').on('focus', function (){
    if(globalIsHuman){
        console.log('hello human, come and give me a hug');
    }else{
        console.log('alien, get away, i hate you..');
    }
    globalIsHuman = true;
});

// alien set focus
function setFocus(){
    globalIsHuman = false;
    $('input').focus();
}
// human use mouse, finger, foot... whatever to touch the input

Si un extraterrestre veut toujours appeler $(input).focus()d'une autre planète. Bonne chance ou vérifiez d'autres réponses

vanduc1102
la source
Cela empêche seulement les gens d'appeler setFocus()- cela n'empêche pas les gens de déclencher l'événement de focus. Ne pas écrire setFocus()du tout empêcherait également les gens de l'appeler, donc je ne vois pas l'avantage. En fait, les gens pouvaient toujours appeler $('input').focus()et faire passer.
Rob
wow, première fois que quelqu'un commente juste après avoir répondu à la question, je
mettrai à
Si vous travaillez dans un environnement fermé sans script autre / tiers, cela fonctionnerait dans un monde parfait. Cependant, la plupart des applications pratiques sont destinées aux sites clients qui ont toutes sortes de plugins et de scripts ajoutés qui peuvent très bien appeler cela. Une chose qui pourrait aider cela est d'encapsuler votre code (et tout code qui a besoin d'appeler cette fonction) dans une fonction de portée comme celle-ci: (function(){/*your code here*/})();cela éviterait que la fonction setFocus ne soit appelée et que le booléen ne soit modifié par des scripts extérieurs.
Xandor