Disable events triggered on HTML <SELECT> control

Question

Is there a way to capture the events triggered on HTML controls before they are forwarded for default (generic) handling by the control itself. In my case, I want to prevent a element dropdown to open when a user clicks on the control. e.g. On this user click, OnClick() event gets fired and is handled by the default control which open the dropdown. I want to stop this from happening.

Can I attach a custom function to this event and redirect the event handling to this one instead of the default code that opens the dropdown?

Thanks

Answer 1

This is the answer I gave on another, similar question.

This works great for me in IE and Chrome, there's no flicker or anything:

html

<select id="MySelect"><option>Hello</option></select>

js

MySelect.onmousedown = function ()
{
    window.setTimeout(function () 
    { 
        //- An immediate blur, then refocus stops the options from being displayed
        this.blur();
        this.focus();
        //- so now we run our custom function
        runOtherFunctionInstead(); 
    },0);
}

Make sure the js runs after the select element has been parse by placing it in an onload or ondocumentready or a script block after the select element. Haven't tried it in Firefox or Opera. Assumedly it would work in Safari, though.

EDIT
As suggested in the comments, the popup will still appear for a double click in IE (all versions). This is due to a bug where the mousedown event doesn't fire for the second click (whoops). You can quickly hide the options again by using the blur, focus method in the ondblclick event and if this method works in Firefox and Safari, I still think it's the best solution considering most people don't double click select boxes.

Answer 2

onclick,onmousedown and onmouseup will not help you to prevent the selectbox from opening. I'm not asking why you want to do that, but if you really can't use any other solution, like for example (changing selectbox to the readonly inputbox), then, you can try the next solution.

One way to prevent the box from opening, is to create an overlay container, which will block the the focusable area of the select. This can be achived by placing the div after the selectbox and givving it the sizes and the position of the selectbox.

<div style="position:relative;">
    <select style="width:100px;height:30px">
        <option>hello</option> 
    </select>
    <div style="position:absolute;
          left:0;
          top:0;
          width:100px;
          height:30px;
          z-index:2;
          background-color:black;
          opacity:0;filter:Alpha(Opacity='0');"
    ></div>
</div>

Event then, it will work only for IE >= 7. Not for IE6, cause selectboxes in IE6 are strange( maybe you can try to fix IE6 with some iframe hack);

Answer 3

you need to set selectbox to be onload disabled: disabled="disabled"