Javascript 单击“禁用选择元素”不会'；t在其上触发click或mousedown事件'；父母

禁用的元素，如

和

对单击事件没有反应，我正在尝试将它们包装在

中，并侦听它的单击事件

单击禁用的

会触发对其容器的单击

，但我对

元素有问题。单击禁用的

元素不会触发它的容器

的单击，正如您在本文中看到的那样

html:

点击

js:

按钮单击=函数（）{
var编辑器=$（“#测试”）；
var div=$（“”）
.mousedown（函数（）{
警惕（！！！）；
})
.附录（编辑）；
变量selecttest=$（“”）
.attr（“禁用”、“禁用”）
.附件（分部）；
$（“”）.attr（“值”，“”）.appendTo（selecttest）；
};

如果我使用以下代码而不是

添加

，它会工作：

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

var textinput=$（“”）
.attr（“类型”、“文本”）
.attr（“禁用”、“禁用”）
.附件（分部）；

针对不同浏览器的测试：

---

对于IE11：对于

输入

和

选择

都有效

对于Firefox：对于

输入

和

选择

都不起作用

---

对于Opera和Chrome：对于

输入

它工作，对于

选择

它不工作

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

另外，您的代码有一个错误

我更正了你代码中的错误。您问题中提到的场景不会响应click事件，因为select已禁用。如果您将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);
};

按钮单击=函数（）{
var编辑器=$（“#测试”）；
var div=$（“”）
.mousedown（函数（）{
警惕（！！！）；
})
.附录（编辑）；
变量selecttest=$（“”）
.attr（“只读”、“真实”）
.附件（分部）；
$（“”）.attr（“值”，“”）.appendTo（selecttest）；
};

---

查看此小提琴-

这是disabled的预期行为，您可能希望禁用

？

mousedown事件不会在禁用的输入或选择元素上触发，也不会在禁用的元素上触发任何鼠标事件。这是您的示例，它同时添加了输入和选择元素，尝试单击它们，它不会触发警报。我用红色背景制作了div，这样你就可以看到它的位置，所以如果你只点击红色部分，它就会开火

因此，您关于mousedown事件是在禁用的输入字段上触发的，而不是在禁用的选择字段上触发的说法是错误的：）

var按钮单击=函数（）{
var编辑器=$（“#测试”）；
var div=$（“”）
.mousedown（函数（）{
警惕（！！！）；
})
.附录（编辑）；
var textinput=$（“”）
.attr（“类型”、“文本”）
.attr（“禁用”、“禁用”）
.附件（分部）；
变量selecttest=$（“”）
.attr（“禁用”、“禁用”）
.附件（分部）；
$（“”）.attr（“值”，“”）.appendTo（selecttest）；
};
选择{
宽度：200px；
}
钮扣{
宽度：70px；
高度：21px；
}
#试验室{
背景：红色；
}

点击
同样的问题，我在select上加了一个div，背景透明。我知道这不是一个完美的解决方案，但我为自己工作


var notAvailablePopup=函数（）{
警报（“不可用：选择工作”）；
}
。不可见\u div{
宽度：68%；
高度：33像素；
背景：rgba（255,0,0,0）；
利润上限：-33px；
z指数：1；
位置：绝对位置
}
.语言{
z指数：0；
}

翻译这段视频
事实上，问题是为什么它可以与禁用的
一起工作，而不能与禁用的
一起工作。我想禁用
选择
。所以用户不能将其下拉？是的，用户不能将其下拉；）对我来说，这将导致一个非常糟糕的用户体验，一个没有功能的选择？我认为您应该隐藏/替换为更清晰的解决方案我有复选框，如果选中-combobox为enable，如果复选框未选中-combobox为disabled。我需要的：当用户选中复选框或单击组合框时，组合框将被启用。对于IE11：对于
输入和
选择，它都有效。对于Firefox：对于
输入
和
选择
都不起作用。对于Opera和Chrome:For
input
有效，For
select
无效。那么，当您单击input或select字段时，是否希望mousedown事件在父项上触发？如果这是您的问题，那么您可以添加指针事件：无到禁用输入并选择，然后无论您在何处单击父div，它都将触发附加到它的事件：）我正在阅读指针事件，我将尝试使用它，谢谢：）很高兴我能帮上忙：）@BojanPetkovski谢谢，但请您详细说明您的解决方案是什么，为什么它解决了无法在禁用的表单元素上触发单击事件的问题？我读了好几遍，从看到JSFIDLE有一个事件被触发的旁白中，我不明白它为什么会起作用。这个“问题”实际上忽略了最重要的部分：问题。如果没有这些，就很难决定正确答案应该包含哪些内容。我的下拉列表取决于另一个下拉列表中的选择。当应使用以下命令启用依赖项时，我移动了边距：$（'.invisible_div'）.css（{'margin top'：'0'}）$（'.invisible_div'）.css（{'margin top'：'45px'}）；并使其外观失效$（#GoalDefnId'）.prop（'disabled'，'disabled'）；
 var textinput = $("<input>")
      .attr("type", "text")
      .attr("disabled", "disabled")
      .appendTo(div);

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