单击禁用的输入或按​​钮

Question

是否可以单击禁用的按钮并向用户提供一些反馈？

HTML:

<input type="button" value="click" disabled>

和JavaScript:

$('input').mousedown(function(event) {
    alert('CLICKED');
});

以上代码对我不起作用; 这不是:

$('input').live('click', function () {
    alert('CLICKED');
});

Answer 1

无法捕获已禁用元素的单击.你最好的选择是对class元素的具体反应.

HTML标记:

<input type="button" class="disabled" value="click" />

JavaScript代码:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

然后,您可以使用CSS样式来模拟禁用的外观:

.disabled
{
    background-color: #DDD;
    color: #999;
}

这是一个证明其用途的jsFiddle.

Answer 2

使该字段readonly可以提供帮助,因为将触发click事件.虽然要注意行为上的差异.

<input type="button" value="click" readonly="readonly" />

Answer 3

放

input[disabled] {pointer-events:none}

在您的CSS中（这可以防止某些浏览器完全放弃对禁用输入的点击），并捕获对父元素的点击。恕我直言，这是一个更干净的解决方案，它比在元素上放置透明的覆盖层来捕获点击更为重要，并且根据情况，也可能比使用CSS简单地“模拟”禁用状态要容易得多（因为这不会阻止输入被提交，还需要覆盖默认的浏览器“禁用”样式）。

如果您有多个这样的按钮，则每个按钮都需要一个唯一的父项，以便能够区分单击了哪个按钮，因为有了pointer-events:none，单击目标是按钮的父项，而不是按钮本身。（或者，我想您可以测试点击坐标...）。

不过，如果您需要支持较旧的浏览器，请检查哪些浏览器支持pointer-events：http : //caniuse.com/#search=pointer-events