Partagez la solution au conflit entre jquery focusout et les événements de clic

Lors d'une recherche sur le moteur de recherche grand public, lorsque vous saisissez du contenu, des invites intelligentes apparaissent souvent. La zone de saisie est la saisie et la zone d'invite intelligente est la suggestion. Il y a généralement deux opérations suivantes :

1. Sélectionnez une invite, copiez le contenu dans l'entrée et fermez automatiquement la suggestion

2. Cliquez ailleurs sur la page Web pour fermer automatiquement la suggestion ; suggestion.

Pour implémenter le premier, vous pouvez utiliser l'événement click, ajouter l'événement de clic de souris dans la suggestion, écrire le contenu cliqué dans l'entrée pendant le traitement, puis fermer la suggestion. Il n'y a aucun problème lorsqu'il est testé seul ;

Pour implémenter le second, vous pouvez ajouter un événement focusout ou un événement flou sur l'élément d'entrée, et fermer la suggestion lorsque l'entrée perd le focus. Aucun problème lorsqu'il est testé seul.

Mais une fois mis en place, il y aura un problème. Il ne répond qu'à l'événement de perte de focus (la suggestion est fermée), mais ne répond pas à l'événement de clic sur le contenu (le contenu de la suggestion cliquée n'est pas obtenu) .

Je ne comprends pas pourquoi il y a un conflit. J'ai effectué une recherche en ligne et j'ai trouvé des problèmes similaires. Certaines personnes ont suggéré d'utiliser le flou, mais le flou est la même chose que la mise au point et aucun des deux ne fonctionne.

Après y avoir réfléchi, j'ai soudain pensé aux conditions de déclenchement de l'événement clic Lorsque vous cliquez sur un bouton, un événement clic est déclenché, et un clic comprend : cliquer sur la souris et relâcher la souris. L'événement click de jquery est déclenché après le relâchement de la souris (en fait, les événements click des éléments bouton et des éléments href sont comme ceci Si vous y réfléchissez, vous comprendrez le problème de conflit qui vient d'exister). s'est produit. Vous cliquez Pour une certaine astuce dans la suggestion, l'événement de perte de focus est déclenché à ce moment-là, fermant la zone de suggestion, puis votre souris est relâchée (la vitesse de réponse de l'ordinateur est plus rapide que la vitesse de clic et de relâchement de la souris), et le clic est terminé, mais à ce moment la souris n'est plus invitée à sélectionner la suggestion, donc l'événement de clic dans la suggestion ne peut pas être déclenché.

Après avoir compris cela, le problème a été résolu. J'ai modifié la réponse dans la suggestion en mousedown, afin qu'elle soit déclenchée lorsque la souris est cliquée. a réussi. Désormais, l'événement mousedown et l'événement focusout ont été gérés correctement.

//input的丢失焦点事件  
$("#input_area").focusout(function(){  
    $("#suggest_div").hide();  
});  
  
//suggest区域的点击事件  
$("#suggest_div li").mousedown(function(){  
    $("#input_area").val($(this).text());  
    $("#suggest_div").hide();  
});

Remplacer click par mousedown est tout à fait ok. C'est tellement simple que j'ai honte de le dire, mais parfois, ce n'est pas facile d'y penser !

De plus, j'ai également trouvé d'autres méthodes sur Internet. L'une est

$("#input_area").keypress(function() {  
    $("#suggest_div").slideDown();  
}).blur(function() {  
    $("#suggest_div").slideUp();  
});

Cette méthode utilise une animation cachée pour provoquer des retards. Rendre l'événement de clic de la zone de suggestion déclenchable. Cependant, slide n'est pas adapté à toutes les situations, et il n'est pas approprié de baser le succès de la fonction sur la vitesse de masquage de l'animation.

Une autre méthode consiste à envelopper l'entrée et la suggestion dans un div et à ajouter l'événement directement au div. Cela n’a pas été testé, mais en théorie cela devrait être possible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!