Question

<select>和<input>等已禁用的元素对点击事件没有反应，我试图将它们包裹在<div>中并聆听它＆＃39 ;点击事件。

点击已停用的<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);
};

如果我使用以下代码而非<input>添加<select>，则可行：

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

测试不同的浏览器：对于IE11：对input和select都有效。

对于Firefox：对于input和select，它都无法正常工作。

对于Opera和Chrome：input适用于select，{{1}}它不起作用。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

因此，您声明mousedown事件在禁用的输入字段上触发但未在禁用的选择上触发的声明为false：）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这正是禁用的预期行为，您可能想要禁用<options>？

Answer 4

禁用的元素不会侦听单击事件，这是禁用元素的行为。具有readonly属性的元素会侦听单击事件。

此外，您的代码有错误。

我更正了代码中的错误。由于select已被禁用，因此您的问题中提到的方案将不会响应click事件。如果您将disbaled更改为readonly，那么它将起作用。

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/

单击禁用的选择元素不会触发其父级上的点击或mousedown事件

4 个答案: