2010-12-09 4 views
2

Il est un peu difficile à mettre en une phrase, mais voici un exemple simple:Comment puis-je ignorer un écouteur de flou lorsqu'un autre écouteur de clic est utilisé dans jQuery?

<html> 
    <head> 
     <title>Example</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
     <!-- 
      $(document).ready(function() { 
       $("#input").focus(function() { 
        $("#p").show(); 
       }).blur(function() { 
        $("#p").hide(); 
       }); 
       $("#p").click(function() { 
        alert("Thanks for clicking me"); 
       }); 
      }); 
     --> 
     </script> 

    </head> 
    <body> 
     <input type="text" id="input" /> 
     <p id="p" style="background:red;display:none""> 
      Click me. 
     </p> 
    </body> 
</html> 

Fondamentalement, lorsque vous vous concentrez sur une entrée d'un paragraphe apparaît et lorsque l'accent est floue au paragraphe disparaître. Cependant, il y a aussi un écouteur de clic sur le paragraphe, donc quand vous cliquez dessus, une boîte de message d'alerte apparaît. Le problème est que lorsque je me concentre sur la zone de saisie, le paragraphe apparaît [attendu] mais lorsque je clique sur le paragraphe, le flou de la zone de saisie est enregistré en premier, le paragraphe est masqué avant que le navigateur ne détecte.

Répondre

2

Essayez Ben Alman's jQuery Outside events plugin

Ensuite, votre code serait:

$(document).ready(function() { 
    $("#input").focus(function() { 
     $("#p").show(); 
    }).bind('focusoutside', function(event) { 
     if (!$(event.target).is('#p')) { 
      $("#p").hide(); 
     } 
    }); 
    $("#p").click(function() { 
     alert("Thanks for clicking me"); 
     // Do this if you need to hide #p after doing 
     // whatever click on p really does. 
     $(this).hide(); 
    }); 
}); 

En utilisant l'événement focusoutside il capturer à la fois en cliquant et tabulant loin de #input et vous permettra de décider, en fonction de l'endroit où l'accent a envie faire.

Exemple: http://jsfiddle.net/petersendidit/WSEWh/2/

+0

Ne vous avez besoin du $ ("# p") cacher() dans la fonction de clic alors.? – mikesir87

+0

@ mikesir87 Cela dépend de ce qu'il veut faire quand on clique sur '# p'. Mais très probablement oui. – PetersenDidIt

+0

Ça a l'air génial! Je ne connaissais pas l'utilisation de l'objet événement, ce qui était très utile. Merci! – mikesir87

Questions connexes