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

IT技术 javascript jquery disabled-control
2021-03-04 19:36:06

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

HTML:

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

和 JavaScript:

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

上面的代码对我不起作用;这也不是:

$('input').live('click', function () {
    alert('CLICKED');
});
6个回答

无法捕获对禁用元素的点击。最好的办法是对class元素上的特定内容做出react

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演示它的用法。

制作该字段readonly会有所帮助,因为将触发 click 事件。尽管要注意行为上的差异

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

input[disabled] {pointer-events:none}

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

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

但是,如果您需要支持旧浏览器,请检查哪些浏览器支持pointer-eventshttp : //caniuse.com/#search=pointer-events

与环绕禁用按钮的 div 一起使用
2021-04-21 19:36:06
在 FF 中对我有用 - 最简单和最兼容的答案
2021-05-08 19:36:06
这应该是可以接受的答案,也适用于 chrome
2021-05-09 19:36:06

你不能没有解决方法,请参阅:jQuery检测点击禁用提交按钮

浏览器禁用禁用元素上的事件。

编辑以从链接添加上下文:

提问者找到了这个线程,并解释了事件未注册的原因:http : //www.webdeveloper.com/forum/showthread.php?t=186057

Firefox,或许还有其他浏览器,会在已禁用的表单字段上禁用 DOM 事件。任何从禁用的表单字段开始的事件都将被完全取消,并且不会向上传播 DOM 树。如果我错了,请纠正我,但是如果您单击禁用按钮,则事件源是禁用按钮,并且单击事件将完全消失。浏览器实际上并不知道按钮被点击了,也不会传递点击事件。就好像您在点击网页上的黑洞一样。

解决方法是将按钮的样式设置为“看起来”禁用,而实际上并非如此。

disabled 元素将不允许用户与它们交互。

所以:不,你不能把onclick一个disabled按钮放在按钮上并期望它会触发。