单击禁用的按钮元素时，onblur 事件不会在 Chrome 中触发 - 在 IE 中有效

Question

我有一个禁用按钮，当输入元素中有文本时应该启用该按钮。启用/禁用按钮的代码在输入的onblur 事件中。我的 HTML 由带有 id="in" 的 input、带有属性 disabled="disabled" 的 button 和带有 id="sp" 的 span 组成。

$(document).ready(function(){
    var count = 0;
    $("#in").bind("blur",function(){
        alert("blur");
        if($("#in").attr("value").length > 0){
            $("button")[0].disabled = false;   
        } else {
            $("button")[0].disabled = true;
        }        
    });

    $("#in").bind("focusout",function(){
        alert("focusout");
        if($("#in").attr("value").length > 0){
            $("button")[0].disabled = false;   
        } else {
            $("button")[0].disabled = true;
        }        
    });

    $("button").click(function(){
        count++;
        $("#sp").text(count);
    });
});

在 IE 9 中，如果我在输入元素中键入文本并单击禁用的按钮，输入的 onblur 将触发，按钮变为启用状态，并且我得到按钮的单击事件。 但是，在 Chrome 中，当我在输入元素中输入文本并单击禁用按钮时，什么都没有发生。

我忽略的按钮是否有某些属性？我试图让focusout 开火，但我得到了相同的结果。我也使用 Firefox 得到相同的结果。 Chrome 似乎比 IE 更严格地对待disabled 属性，但这会给我们的用户带来问题。当我在禁用按钮上单击输入元素时，如何触发 onblur（或一些等效的）事件？

Answer 1

在 Chrome 中，禁用的按钮会删除所有事件侦听器。单击、右键单击、选择启动等不适用于禁用的按钮。这意味着当您单击禁用按钮时，焦点不会离开输入。您可以通过class="disabled" 手动禁用该按钮，并添加一些样式使其看起来已禁用。下面是一个 CSS 示例，您可以使用它来使按钮看起来被禁用：

button.disabled,
button.disabled:hover,
button.disabled:active,
button.disabled:focus {
    color:gray;
    background:#EEE;
    border:1px solid #AAA;
    border-radius:3px;
    outline:none;
}

我制作了一个显示此 here 的 JSFiddle。另请注意，我现在更改了切换禁用类的代码，而不是禁用属性，并且我在您的按钮单击事件处理程序中放置了 if 语句，以便在按钮时不会触发已禁用。