单击禁用的选择元素不会触发其父级上的单击或鼠标按下事件

Question

禁用元素，例如<select>并且<input>对 click 事件没有反应，我试图将它们包装在 a 中<div>并收听它的 click 事件。

单击禁用<input>会触发单击它的容器<div>，但我遇到了<select>元素问题。单击禁用的<select>元素不会触发它的容器<div>单击，正如您在此JSFiddle 示例中所见。

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

如果我<input>使用以下代码而不是添加<select>，它会起作用：

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

针对不同的浏览器测试：对于IE11：两个input和select它的作品。

对于Firefox：您在input和select它不工作。

对于 Opera 和 Chrome：因为input它有效，因为select它不起作用。

Answer 1

同样的问题在这里，我在 select 上方放置了一个具有透明背景的 div。我知道这不是完美的解决方案，但我为我工作。

var notAvailablePopup = function (){
   alert( "not available : work on select" );
}

.invisible_div {
  width: 68%; 
  height: 33px; 
  background: rgba(255,0,0,0); 
  margin-top: -33px;
  z-index:1;
  position:absolute
}

.language {
  z-index: 0;
}

<div onclick ="notAvailablePopup()" class="row language" >
  <select disabled="disabled" class="form-control select-elem"  >
    <option value="">Translate this video</option>                      </select>


  <div class="invisible_div">
   </div>
</div>

Answer 2

mousedown 事件不会在禁用的输入或选择元素上触发，也不会在禁用的元素上触发任何鼠标事件。这是您的示例，它添加了输入和选择元素，尝试单击它们，它不会触发警报。我将 div 的背景颜色设置为红色，这样您就可以看到它在哪里，因此如果您仅单击红色部分，它将触发。

因此，您的声明 mousedown 事件在禁用的输入字段上触发，但不在禁用的选择上触发是错误的:)

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>