单击禁用的select元素不会触发其父级上的click或mousedown事件 [英] Clicking disabled select element doesn't trigger click or mousedown events on it's parent

问题描述

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

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.

点击a已停用< input> 触发点击它的容器< div> ，但我遇到了<$的问题c $ c>< select> 元素。点击已停用的< select> 元素不会触发它的容器< div> 的点击，就像你一样可以在这个 JSFiddle示例中看到。

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

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

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

测试不同的浏览器：
对于IE11：对于输入和选择它可以工作。

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

对于Firefox：两个输入和选择它不起作用。

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

对于Opera和Chrome：对于输入它适用于选择它不起作用。

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

推荐答案

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

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.

所以你的声明是mousedown事件在禁用的输入字段上触发，但不在禁用时选择为false：）

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>

这篇关于单击禁用的select元素不会触发其父级上的click或mousedown事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！