Existe-t-il un événement DOM qui se déclenche lorsqu'un élément de sélection HTML est fermé?

Question

Je suis à la recherche d'un DOM événement que je peux écouter avec JavaScript pour quand sélectionnez un élément qui a été ouvert (mais aucune option n'a été changé) est fermé puis en cliquant sur désactiver l'élément select, quelque part (n'importe où) sinon sur la page.

Ce n'est pas l' blur cas de le sélectionner, car l'sélectionnez conserve le focus. De même, il n'est pas l' focus événement d'un autre élément ou le document, ou un mousedown ou click sur la fenêtre de document ou de l'organisme.

Ce n'est pas l' change cas de le sélectionner, puisque aucune option dans le a été changé.

Je ne suis pas préoccupé par héritage des Explorateurs Internet - juste quelque chose à travailler dans les standards des navigateurs modernes. Propriétaire hacks pourrait être intéressant de savoir si.

J'ai créé un JSFiddle pour illustrer le problème: http://jsfiddle.net/premasagar/FpfnM/

1. Cliquez sur la selectbox dans le "Résultat" du panneau
2. Cliquez sur le texte marqué "ICI" (ou n'importe où d'ailleurs) avec un seul clic et de voir si une manifestation est ajoutée dans le journal. Il n'y a pas un événement dans le dernier Chrome ou Firefox.

La question est donc: JavaScript qui pourrait être ajouté, pour obtenir un événement enregistré lorsque vous cliquez hors de la selectbox?

(J'ai demandé à un semblable, mais différente de la question ici:
JavaScript sur iOS: l'ouverture du HTML sélectionner l'élément)

Answer 1

Malheureusement il n'y a pas de norme de l'événement pour savoir quand une boîte de sélection est ouvert ou fermé, de sorte que votre code va être assez poilue avec des aménagements pour les différents navigateurs. Cela dit, je pense qu'il peut être fait, et j'ai obtenu quelque chose à travailler pour vous dans Firefox à l'aide de l' mouseup événement:

http://jsfiddle.net/FpfnM/50/

Dans Firefox (et je suppose que google Chrome), vous allez avoir besoin pour le suivi de l'état de l'sélectionnez assez attentivement. Lorsqu'un escape touche est enfoncée ou blur événement se produit, vous devez mettre à jour l'état de l'identifier comme étant fermé. Je n'ai pas encore mis en œuvre que dans ma démo, et vous pouvez voir ce qui se passe si vous frappez échapper au lieu de cliquer hors de la sélectionner.

Les choses étaient plus faciles dans Safari, où un mousedown d'un événement sur l'sélectionnez signifie l'ouverture de la sélectionner, et tout proche de la sélection est indiquée par un click événement.

Si vous trouvez un navigateur dans le cas où aucun de ces événements feu, vous pouvez essayer un autre truc. Car la forme de widgets comme select et textarea sont souvent rendus par le système d'exploitation et non pas à l'intérieur du navigateur, il est possible que vous pouvez interagir avec eux et de certains messages peuvent ne pas descendre vers le navigateur du gestionnaire d'événement. Si vous avez été à la position d'un transparent textarea couvrant l'écran à une baisse des z-index lorsque la boîte de sélection est ouverte, vous pourriez être en mesure de l'utiliser pour suivre l'étroit cliquez sur. Il peut être en mesure de capturer des événements que d'un navigateur élément du DOM peut manquer.

Mise à jour: Chrome voit un mousedown sur la sélection quand il s'ouvre et un mouseup sur le document lorsque la page est cliqué avec une sélectionnez ouvrir. Voici une version qui fonctionne avec google Chrome:

http://jsfiddle.net/FpfnM/51/

Encore une fois, vous aurez besoin de faire quelques détection du navigateur pour gérer le bon comportement dans chacun d'eux. Un piège avec Chrome, en particulier, est qu'aucun événement est déclenché lorsque vous cliquez sur le bouton sélectionner une deuxième fois pour la fermer. Vous pouvez détecter la page, cliquez, cependant.

Rapide Résumé:

Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close

Il y a énormément de cas limites pour d'autres événements qui signifiera un proche (échapper à la pression de touche, flou, etc.), mais ceux-ci sont le minimum pour gérer le scénario où un utilisateur clique sur la case "sélectionner" puis clique dans la zone du document.

Espérons que cette aide!

Answer 2

J'ai eu les événements suivants en suivant les instructions sur votre JSFiddle à la lettre:

BODY, mousedown, STRONG
#document, mousedown, STRONG
window, mousedown, STRONG
SELECT, blur, SELECT
BODY, click, STRONG
#document, click, STRONG
window, click, STRONG

Ce sont tous des événements qui se sont déclenchés quand j'ai cliqué sur "ICI" après l'sélectionnez menu a déjà été mis au point et développé. C'était dans la dernière version de Chrome.

Ne devrait pas l'un quelconque de ces suffire à vos besoins?

Edit: Si vous voulez vous assurer que c'est votre Sélectionnez l'élément perd le focus, définir une variable Javascript, 'selectFocused', et de le mettre à False. Attribuez la valeur True lorsque vous Sélectionnez le menu reçoit le focus, et le mettre à False lorsque l'un des événements ci-dessus se produit. 'selectFocused" peut maintenant être utilisé n'importe où dans votre code pour détecter si oui ou non votre Sélectionnez l'élément a actuellement le focus, et lors du changement de valeurs, vous savez que votre Sélectionnez l'élément a été sélectionné ou désélectionné.

Answer 3

Mon premier instinct est un petit rond-point pour y parvenir. Ce serait d'utiliser le code que vous utilisez normalement pour fermer un menu déroulant (personnalisé) sur la presse à l'extérieur:

 function clickInBody(){
 functionToCallOnBlur();
}

function clickInBodyStop(event){
    event.stopPropagation();
}
 

Ensuite, sur votre balise body, vous ajoutez onClick="clickInBody()" et sur votre élément sélectionné, vous ajoutez onClick="clickInBodyStop(event)" . Cela devrait appeler l'événement chaque fois que vous cliquez sur la page, mais si vous cliquez sur la balise select, la propagation sera stoppée et non appelée functionToCallOnBlur()

Answer 4

condition préalable: à l'aide de jQuery! Ce sera probablement la seule de résoudre votre problème, mais si vous êtes à la recherche pour un évènement qui se déclenche lorsque vous cliquez en dehors d'un élément, vous pouvez utiliser une superposition div.

Lorsque l'utilisateur clique sur la zone de sélection:

$('#mySelectBox').click(function () {
    var myOverlayDiv = $('<div id="overlayDiv" class="overlayDiv"></div>')
    .click(function () {
        // call your "select lost focus" function here
        // which should include $('#overlayDiv').remove() somewhere!
    })
    .show()
    .appendTo(document.body);
});

Le Style de la superposition div:

.overlayDiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
z-index:1000;
}

Vous devez vous assurer que votre boîte de sélection de menu est un Z-index supérieur ainsi, lorsque l'utilisateur clique sur le menu afficher le menu et pas de la superposition de la div :)