jQuery remettant à la fois le focus et le clic sur un élément

Je suis en train de déterminer les flux de travail pour affiner une entrée de données de l'application web. Image plusieurs formulaires d'adresse sur une seule page web:

  1. Name___________
     Street_________
     Phone__________

  2. Name___________
     Street_________
     Phone__________

  [...many more...]

Maintenant, je voudrais savoir si l'utilisateur est à l'aide de la touche tab pour aller à la deuxième champ "Nom" (ou n'importe où à l'intérieur de cet enregistrement), ou si elles sont à l'aide de la souris, cliquez sur elle. (Ou maj + tab pour vous déplacer dans le sens inverse.)

J'ai mis un gestionnaire à la fois l'accent et cliquez sur le champs de saisie:

$('input').click(function() { TabulateClick(this) });
$('input').focus(function() { TabulateFocus(this) });

Et dans le gestionnaire, je déterminer l'adresse de l'utilisateur est de travailler, et si nous avons "sous tension". (Si l'accent a été mis dans "Téléphone" pour la première adresse, et vous cliquez sur le champ "Nom" dans la même adressece n'est pas réellement de changement, donc je n'ai pas à compiler.)

    function TabulateClick(field)
    {
         var currentAddressRecord = FindAddress(field);
         if ( lastAddressRecord != currentAddressRecord )
             switchedAddressesWithClick++;
         lastAddressRecord = currentAddress;
    }
    function TabulateFocus(field)
    {
         var currentAddress = FindAddress(field);
         if ( lastAddressRecord != currentAddressRecord )
             switchedAddressesWithTab++;
         lastAddressRecord = currentAddress;
    }

Mon problème est que lorsque je clic de souris dans le champ de la focus événement se déclenche d'abord, résumant un faux switchedAddressesWithTab et la modification de la currentAddress (c'est mauvais). Lorsque le click gestionnaire s'exécute, le lastAddressRecord est gâté.

Est-il un chemin à l'intérieur de la focus gestionnaire de savoir qu'il y a une attente click événement sur le même objet? Ou dans le click gestionnaire de savoir qu'il a été précédemment simplement manipulés par focus?

source d'informationauteur Clinton Pierce

  1. 15

    Voici quelque chose qui, je pense, des travaux basés sur le fait que le mousedown qui se passe avant la mise au point. Voir démo.

    var lastClick = null;
$('input').mousedown(function(e) {
  lastClick = e.target;
}).focus(function(e){
    if (e.target == lastClick) {
      console.log('click');
    } else {
      console.log('tab');    
    }
    lastClick = null;

});

    Pour corriger le bug découvert par Josias, j'ai changé mon code ci-dessous. Voir démo.

    var lastFocusedElement = null;
var isClick = false;
$('input').mousedown(function(e) {     
     isClick= true;
}).focus(function(e){

    //To prevent focus firing when element already had focus
    if (lastFocusedElement != e.target) {
        if (isClick) {
          console.log('click ----');
        } else {
          console.log('tab -----');    
        }
        lastFocusedElement = e.target;
        isClick = false;
    }
});

$(document.body).focus(function(){
  lastFocusedElement = document.body;
});

    Le seul problème, c'est que vous n'obtenez pas de "clic", ou onglet lorsque vous passez loin de la fenêtre et revenir en arrière. Vous faire une idée de l'événement sur l'entrée de la concentration, mais vous ne pouvez pas déterminer si c'est un onglet ou cliquez sur, parce que c'est ni.

    Je pense que c'est le plus proche que vous obtiendrez, je voudrais essayer ceci sur votre page et de voir si le comportement est assez bon.

  2. 2

    Vous pouvez utiliser le .sur() méthode jQuery. Voici une autre manière de lier les deux événements sur le même élément.

    var hasClicked = false;
$('.myinputfield').on('mousedown : click',function(e){
     if (e.type == 'mousedown') {
        //execute code
        hasClicked = true;
     }
     if(e.type == 'focus' && !hasClicked) {
        //execute code
        console.log(e.type)
     }
     hasClicked = false;
});
  3. 0

    Juste lier la mise au point et vérification de l'événement pour voir si e.which == 9 //tab.

    Mon idée de départ ne fonctionne pas (merci @Juan). À l'aide de la combinaison d'événements devrait vous rendre où vous voulez être.
    Si l'utilisateur clique dans la zone de texte de la dernière touche, ce ne sera pas un onglet. Toutes les entrées sont à regarder et mémorisation de la dernière touche code pour passer à l'intérêt de l'événement.
    voici le violon

    var lastKeyCode = 0;
$('input').focus(function(e) {
    if(lastKeyCode == 9)
         //tabbed into field
    else
         //clicked into field
}).keydown(function(e){
    if(e.which == 9) //added timeout to clear lastkeypress
        setTimeout(function(){lastKeyPress = 0}, 50);
    lastKeyPress = e.which; //store last key code
});