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

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

本文关键字：鼠标 事件 元素 选择 单击      更新时间：2023-09-26

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

单击禁用的<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);
};

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

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

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

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

对于Opera和Chrome：对于input有效，对于select无效。

这里也有同样的问题，我在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>

mousedown事件不会在禁用的输入或选择元素上触发，也不会在禁用元素上触发任何鼠标事件。这是你的例子，它添加了input和select元素，试着点击它们，它不会触发警报。我把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>

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

我战斗有点晚了，
博扬·佩特科夫斯基帮了很多忙，但他直接回答道：http://jsfiddle.net/jea1mtz6/

刚刚在您的CSS中添加了子元素"；选择"：pointer-events: none;

元素永远不是指针事件的目标。但事件可能会针对其后代元素。

其他答案不适用于所有浏览器（z-index）或"z"；欺骗；使用半破解（只读）。在Chrome和firefox 上测试

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

此外，您的代码有一个错误。

我更正了你代码中的错误。由于选择被禁用，您的问题中提到的场景将不会响应单击事件。如果你将取消粘贴改为只读，那么它就会起作用。

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/

相关文章：