点击禁用的select元素不会触发它的父级上的点击或mousedown事件

Question

禁用的元素，如<select>和<input>不会对点击事件做出反应，我试图将它们包装在<div>中，并听取它的单击事件。

点击一个被禁用的<input>触发点击它的容器<div>，但我遇到了<select>元素的问题。单击禁用的<select>元素不会触发它的容器<div>的单击，如您在此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); 
}; 

如果我使用的，而不是<select>下面的代码添加<input>，它的工作原理：

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

测试不同的浏览器： 对于IE11：对于它的工作原理是和select。

对于Firefox：对于input和select都不起作用。

For Opera and Chrome：for input it works，for select it does not work。

Answer 1

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>

Answer 2

禁用的元素不听点击事件，这是禁用元素的行为。具有只读属性的元素监听点击事件。

此外，您的代码有错误。

我更正了你的代码中的错误。您的问题中提到的方案将不会响应点击事件，因为选择已禁用。如果您将disbaled更改为只读，那么它将起作用。

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

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

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

看到这个小提琴 - http://jsfiddle.net/Ashish_developer/5d4qewps/1/