禁用按钮上的火警警告不起作用于Firefox

Question

我正在尝试在您点击禁用按钮时收到提醒，并且以下代码在Chrome中正常运行，但它没有在Firefox中触发警报。

使用Javascript：

$(document).on('click',function(e){
    if(e.target.id == "disabled" && e.target.disabled){
        alert("The textbox is clicked.");
    }
});

HTML：

<form>
    <input id="disabled" type="button" value="clk" disabled>
</form>

Answer 1

试试这个：它在firefox版本28.0中运行，这里是截图

<form>
<input id="disabled" type="button" value="clk" disabled>
</form>

jQuery：

$(document).on('click',function(e){

  var isDisabled = $('#disabled').prop('disabled');

    if (isDisabled)
    {
            alert('yes');
    }
    else
    {
        alert('no');
    }    

});

FIDDLE

此外，您不能有鼠标事件，例如单击禁用元素。您可以选择这样做：FIDDLE DEMO

Answer 2

Firefox以及其他浏览器可能会禁用已停用的表单字段上的DOM事件。从已禁用的表单字段开始的任何事件都将被完全取消，并且不会在DOM树中向上传播。如果我错了，请纠正我，但如果您单击禁用按钮，则事件源是禁用按钮，并且完全消除了单击事件。浏览器实际上并不知道按钮被点击，也没有通过点击事件。这就像你点击网页上的黑洞一样。

来源：Disabled button stealing onclick events in firefox

根据@VDesign帖子引用一个较旧的问题，我创建了这个小提琴fiddle。

<强> HTML：

<div style="display:inline-block; position:relative;">
    <input id="disabled" type="button" value="clk" disabled>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

<强> JS：

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();  
});

Answer 3

此问题的可能解决方案：

审核Event on a disabled input

在您的禁用按钮周围放置一个div并在div上附加一个onclick事件就可以了。

Answer 4

@AlexChar的答案完美地说明了潜在的问题： Firefox吞噬了disabled输入元素上的点击事件（可能还有其他事件）。我添加了这个答案，因为我认为这要少一些解决此问题的方法是在2020年。如果您为禁用的pointer-events元素（input）关闭input:disabled，则该事件将扩展到父级div。只能通过@-moz-document url-prefix()规则在Firefox中完成此操作。

@-moz-document url-prefix() {
  input:disabled {
    pointer-events: none;
  }
}

<div onclick="alert('working!')">
  <input disabled>
</div>

请注意，这样做的缺点是无法突出显示和复制disabled输入中的文本，但是还有其他解决方法。