Clicking disabled select element doesn't trigger click or mousedown events on it's parent

Question

Disabled elements such as <select> and <input> doesn't react to click event , I'm trying to wrap them in a <div> and listen to it's click event.

Clicking a disabled <input> triggers the click on it's container <div>, but I am having problem with <select> elements. clicking a disabled <select> element doesn't trigger it's container <div>'s click, as you can see in this JSFiddle Example.

html:

<button onclick="buttonClick()" >Click</button>
<div id="test"></div>

js:

buttonClick = function (){
    var editor = $("#test");

    var div=$("<div>")
      .mousedown(function () {
          alert("!!!");
        })
      .appendTo(editor);

     var selecttest = $("<select>")
      .attr("disabled", "disabled")
      .appendTo(div);
     $("<option />").attr("value", '').appendTo(selecttest);
};

If I add an <input> using the following code instead of <select>, it works:

 var textinput = $("<input>")
      .attr("type", "text")
      .attr("disabled", "disabled")
      .appendTo(div);

Tests for different browsers: For IE11: for both input and select it works.

For Firefox: for both input and select it doesn't work.

For Opera and Chrome: forinput it works, for select it doesn't work.

Answer 1

The mousedown event doesn't fire on disabled input or select elements, or any mouse event on disabled elements. Here is your example and it adds both the input and select element, try clicking on them, it will not fire an alert. I have made the div with background color red so you can see where it is, so if you click only on the red part it will fire.

So your statement that the mousedown event is fired on disabled input field, but not on disabled select is false :)

var buttonClick = function() {
  var editor = $("#test");

  var div = $("<div>")
    .mousedown(function() {
      alert("!!!");
    })
    .appendTo(editor);

  var textinput = $("<input>")
    .attr("type", "text")
    .attr("disabled", "disabled")
    .appendTo(div);

  var selecttest = $("<select>")
    .attr("disabled", "disabled")
    .appendTo(div);
  $("<option />").attr("value", '').appendTo(selecttest);

};

select {
  width: 200px;
}
button {
  width: 70px;
  height: 21px;
}
#test div {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>


<button onclick="buttonClick()">Click</button>
<div id="test"></div>