Is there a DOM event that fires when an HTML select element is closed?

Question

I am looking for a DOM event that I can listen using JavaScript when the selected element is opened (but no parameters have been changed) is closed by pressing the select element somewhere (anywhere) on page

This is not a blur event for selection, since the selection retains focus. Similarly, this is not the focus event of any other element or document, or mousedown or click in a window, document or body.

This is not a change event for selection, since no option in the selection has been changed.

I'm not interested in outdated Internet Explorers - just something to work in modern standards-compliant browsers. However, proprietary hacks can be useful.

I created a JSFiddle to demonstrate the problem: http://jsfiddle.net/premasagar/FpfnM/

• Click the select button in the Result panel
• Click on the text that says "HERE" (or somewhere else) with one click and see if any event is added to the log. There is no event in recent versions of Chrome or Firefox.

So the question is: What kind of JavaScript can I add to register an event when I click the select button?

(I asked a similar but different question here:
JavaScript on iOS: opening an HTML select element )

Answer 1

Unfortunately, there is no standard event to know when the selection window is closed or open, so your code will be quite hairy with placement for different browsers. However, I think it can be done, and I got something for you in Firefox using the mouseup event:

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

In Firefox (and I assume Chrome) you will need to carefully monitor the status of this element. When the escape key or blur event is pressed, you need to update the state to identify it as closed. I did not implement this in my demo, and you can see what happens if you press escape rather than clicking on the selection.

Safari made it easier where the mousedown event in select means opening a selection, and any closing of a selection means a click event.

If you find a browser in which none of these events fire, you can try another trick. Since form widgets, such as select and textarea, are often displayed by the operating system rather than inside the browser, it is possible that you may interact with them, and some messages may not fall into the browser event handler. If you placed a transparent text area that would close the screen at a lower z-index when the selection box is open, you can use it to track this closed click. It can catch events that may be missing a browser DOM element.

Update: Chrome sees multi-downs when selecting when it opens, and the mouse button in the document when the page is clicked using selection. Here is the version that works with Chrome:

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

Again, you will need to do some browser detection to deal with the correct behavior in each of them. One catch with Chrome, in particular, is that no event is fired when you click a second time to close it. However, you may notice a click on the page.

Short description:

 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 

There are many errors for other events that mean closing (escape keypress, blur, etc.), but this is the minimum for processing the script when the user presses the select button and then clicks on the document area.

Hope this helps!

Answer 2

I received the following events following your JSFiddle's email instructions:

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

These are all the events that were triggered when I clicked HERE after the selection menu was already in focus and expanded. This was in the latest version of Chrome.

Should any of these be enough for your purposes?

Edit: if you want your Select element to lose focus, set the Javascript global variable "selectFocused" and set it to False. Set it to True when your Select menu gets focus, and set it to False when any of the above events occur. 'selectFocused' can now be used anywhere in your code to determine if your Select element currently has focus, and when it changes values, you know that your Select element has been selected or not selected.

Answer 3

My first instinct is a little roundabout way to achieve this would be to use the code that you usually use to close the (custom) popup menu that clicks outside:

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

Then in the body tag you add onClick="clickInBody()" , and in the select element you add onClick="clickInBodyStop(event)" . This should trigger an event every time you click on the page, but if you click on the select tag, it will stop the distribution and will not call functionToCallOnBlur()

Answer 4

precondition: using jQuery! This probably only solves part of your problem, but if you want the event to fire when an element is clicked, you can use an overlay div.

When the user clicks on the selection box:

 $('#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); }); 

Style for overlay div:

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

You need to make sure your selection menu is a higher Z-index, so when the user clicks on the menu, they get the menu, not the overlay div :)

Answer 5

If you have more than 1 drop-down list:

  $("select").each(function () { var initDropdown = $(this); initDropdown.data("open", false); console.log(this.name + " closed"); initDropdown.on("blur", function () { var blurDdopdown = $(this); blurDdopdown.data("open", false); console.log(this.name + " closed"); }); }); $("select").bind("click", function () { var clickedDropdown = $(this); if (clickedDropdown.data('open') == false) { clickedDropdown.data('open', true); console.log(this.name + " open"); } else { clickedDropdown.data('open', false); console.log(this.name + " closed"); } });