Force le focus sur un élément avec une exception. (jQuery)

Question

J'ai deux champs d'entrée. Je veux forcer le focus sur #area, peu importe où l'utilisateur clique à moins que il est sur #input. J'ai essayé quelque chose comme ça, mais comme l'entrée fait partie du document, ça ne marche pas.

$("#area").focus(); 
$(document).click(function() { $("#area").focus() }; 
$("#input").click(function() { $("#input").focus() }; 

Pensées?

Answer 1

changement à

$("#area").focus(); 
$(document).click(function() { $("#area").focus() }); 
$("#input").click(function(e) { e.stopPropagation(); $("#input").focus() }); 

Cela arrêtera l'événement de bouillonnement du document, et ne sera pris par le #input

Answer 2

Vous devez annuler l'événement bouillonnant en cliquant sur la normale entrées, soit en renvoyant false dans votre gestionnaire d'événements, soit en appelant le e.stopPropagation(). Je ne suis pas sûr si l'ordre dans lequel vous affectez des gestionnaires d'événements est important, mais vous pouvez essayer de placer l'événement #input en premier.

Answer 3

La solution stopPropogation est plus simple que ce que je vais suggérer, mais cela vaut probablement la peine de discuter de cette autre option. Dans cette première fonction que vous avez, vous pouvez essayer de prendre le premier argument de la fonction, qui est un objet événement normalisé jQuery:

$(document).click(function(event) { ... 

et de le tester pour voir si la propriété target de l'événement est votre entrée :

$(document).click(function(event) { 
    if(! (event.target == $("#input").get(0))) 
     $("#area").focus(); 
}