L’événement de flou arrête le travail de cliquer sur l’événement?

Il semble que l’événement Flou empêche le gestionnaire d’événements de clic de fonctionner? J’ai une liste déroulante où les options apparaissent uniquement lorsque le champ de texte a le focus. Choisir un lien d’option devrait provoquer un événement.

J’ai un exemple de violon ici: http://jsfiddle.net/uXq5p/6/

Reproduire:

Sélectionnez la zone de texte
Les liens apparaissent
Cliquez sur un lien
Le flou se produit même et les liens disparaissent
Rien d’autre ne se passe.

Comportement attendu:

A l’étape 5, après le flou, le clic devrait même se déclencher. Comment puis-je y arriver?

METTRE À JOUR:

Après avoir joué avec cela pendant un certain temps, il semble que quelqu’un ait fait de grands efforts pour empêcher qu’un événement de clic déjà survenu soit traité si un événement de flou rendait l’élément non cliqué.

Par exemple:

$('#ShippingGroupListWrapper').css('left','-20px');

fonctionne bien, mais

 $('#ShippingGroupListWrapper').css('left','-2000px');

empêche l’événement de clic.

Cela semble être un bogue dans Firefox, car rendre un élément non cliquable devrait empêcher les clics futurs , mais ne pas annuler ceux qui ont déjà eu lieu lorsque vous avez cliqué dessus.

Autres choses qui empêchent le traitement de l’événement de clic:

 $('#ShippingGroupListWrapper').css('z-index','-20'); $('#ShippingGroupListWrapper').css('display','none'); $('#ShippingGroupListWrapper').css('visibility','hidden'); $('#ShippingGroupListWrapper').css('opacity','.5');

J’ai trouvé quelques autres questions sur ce site qui ont des problèmes similaires. Il semble y avoir deux solutions:

Utilisez un délai. Ceci est mauvais car il crée une condition de concurrence entre le gestionnaire d’événements masquant et le clic. C’est aussi bâclé.
Utilisez l’événement mousedown . Mais ce n’est pas non plus une très bonne solution puisque click est l’événement correct pour un lien. Le comportement de mousedown est contre-intuitif d’un sharepoint vue UX, d’autant plus que vous ne pouvez pas annuler le clic en déplaçant la souris hors de l’élément avant de relâcher le bouton.

Je peux penser à quelques autres.

3.Utilisez la mouseover et la mouseover sur le lien pour activer / désactiver l’événement de flou pour le champ. Cela ne fonctionne pas avec la tabulation du clavier car la souris n’est pas impliquée.

4.La meilleure solution serait quelque chose comme:

 $('#ShippingGroup').blur(function() { if($(document.activeElement) == $('.ShippingGroupLinkList')) return; // The element that now has focus is a link, do nothing $('#ShippingGroupListWrapper').css('display','none'); // hide it. }

Malheureusement, $(document.activeElement) semble toujours renvoyer l’élément body, pas celui qui a été cliqué. Mais peut-être que s’il y avait un moyen fiable de savoir quel élément a maintenant le focus ou deux, quel élément a causé le flou (et non quel élément est flou) depuis le gestionnaire de flou. En outre, y a-t-il un autre événement (à part mousedown ) qui se déclenche avant le flou?

click event se déclenche après le blur pour que le lien soit caché. Au lieu de click utilisez mousedown cela fonctionnera.

 $('.ShippingGroupLinkList').live("mousedown", function(e) { alert('You wont see me if your cursor was in the text box'); });

Une autre solution consiste à attendre un peu avant de masquer les liens lors d’un événement blur . C’est à vous de choisir quelle approche choisir.

Démo

Vous pouvez essayer l’événement mousedown au lieu de click .

 $('.ShippingGroupLinkList').live("mousedown", function(e) { alert('You wont see me if your cursor was in the text box'); });

Ce n’est clairement pas la meilleure solution car un événement mousedown n’est pas réalisé de la même manière pour l’utilisateur qu’un événement click . Malheureusement, l’événement de blur annulera également les événements de la mouseup .

4.La meilleure solution serait quelque chose comme:
 $('#ShippingGroup').blur(function() { if($(document.activeElement) == $('.ShippingGroupLinkList')) return; // The element that now has focus is a link, do nothing $('#ShippingGroupListWrapper').css('display','none'); // hide it. } 
Malheureusement, $ (document.activeElement) semble toujours renvoyer l’élément body, pas celui qui a été cliqué. Mais peut-être que s’il y avait un moyen fiable de savoir quel élément a maintenant le focus ou deux, quel élément a causé le flou (et non quel élément est flou) depuis le gestionnaire de flou.

Ce que vous cherchez peut-être e.relatedTarget . Ainsi, lorsque vous cliquez sur le lien, e.relatedTarget doit être e.relatedTarget avec l’élément link, alors dans votre gestionnaire de flou, vous pouvez choisir de ne pas masquer le conteneur si l’élément cliqué se trouve dans le conteneur (ou le comparer directement au lien):

 $('#ShippingGroup').blur(function(e) { if(!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) { // Alt: (!e.relatedTarget || $(e.relatedTarget) == $('.ShippingGroupLinkList')) $('#ShippingGroupListWrapper').css('display','none'); // hide it. } }

( relatedTarget peut ne pas être pris en charge dans les navigateurs plus anciens pour les événements blur , mais il semble fonctionner dans les derniers Chrome, Firefox et Safari)

Effectuer une action qui devrait se produire en un click sur un mousedown est une mauvaise mousedown pour UX. Au lieu de cela, de quoi un click constitué efficacement? Un mousedown et un mouseup .

Par conséquent, arrêtez la propagation de l’événement mousedown dans le gestionnaire mousedown et exécutez l’action dans le gestionnaire de mouseup .

Un exemple dans ReactJS:

  e.preventDefault()} onMouseUp={() => alert("CLICK")}> Click me!