Disable events triggered on HTML <SELECT> control

Is there a way to captu开发者_JAVA技巧re 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

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);

Fairly old question with some good suggestions, but none seem to directly answer the original question. In case anybody out there is wondering, I believe the OP was wanting to keep the visual appearance of the system/browser select element, but use his own custom drop-down menu instead of the system/browser drop-down menu.

In this case, the onclick event will occur too late for you to stop the actual drop-down menu from displaying. What you want to do is bind to the mousedown event, and prevent the event from propagating to the default behavior:

document.getElementById('my_select_id').onmousedown = function(event) {
   // ... do something here...perhaps display your own custom menu, an advanced selection chooser, focus another element, display a message, or some other custom handling.
   event.preventDefault(); // This prevents the drop-down menu from displaying
}

Notes:

• Replacing the drop-down with a custom-designed element (as suggested by others) isn't always an option. In some cases, you'll end up either having to completely omit default/system drop-downs from your site (in favor of a custom-designed element), or you have to live with a mismatch in visual appearance due to browser/system/theme differences (unless you feel like designing the custom element to match every conceivable visual aesthetic/theme.)
• Disabling the drop-down will not work, as it will prevent the event handlers from firing.
• Using optgroups will still allow the drop-down menu to be displayed.
• Replacing the drop-down with an empty version will still display an empty drop-down menu.

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.

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