是否可以点击禁用的按钮并向用户提供一些反馈?
HTML:
<input type="button" value="click" disabled>
和JavaScript:
$('input').mousedown(function(event) {
alert('CLICKED');
});
以上代码对我不起作用;这两个都不是:
$('input').live('click', function () {
alert('CLICKED');
});
答案 0 :(得分:22)
无法捕获已禁用元素的点击。您最好的选择是对元素上的特定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。
答案 1 :(得分:14)
使字段readonly
可以提供帮助,因为将触发click事件。虽然要注意differences in behaviour。
<input type="button" value="click" readonly="readonly" />
答案 2 :(得分:4)
如果没有解决方法,请参阅:jQuery detect click on disabled submit button
浏览器禁用已禁用元素的事件。
编辑以从链接添加上下文:
提问者发现这个帖子解释了事件没有注册的原因:http://www.webdeveloper.com/forum/showthread.php?t=186057
Firefox以及其他浏览器可能会禁用表单字段上的DOM事件 被禁用。从禁用的表单字段开始的任何事件都是 完全取消并且不会传播DOM树。纠正我 如果我错了,但是如果你点击禁用按钮,则来源 事件是禁用按钮,完成点击事件 歼灭。浏览器字面上不知道点击的按钮, 也没有通过点击事件。这就像你点击一个 网页上的黑洞。
解决方法是将“查看”按钮的样式设置为禁用,而实际上并非如此。
答案 3 :(得分:4)
把
input[disabled] {pointer-events:none}
在CSS中(它可以防止某些浏览器完全放弃对已禁用输入的点击),并捕获父元素上的点击。这是一个更清洁的解决方案,恕我直言,而不是在元素上放置透明覆盖来捕获点击,并且根据情况也可能比使用CSS简单地“模拟”禁用状态容易得多(因为这不会阻止输入已提交,还需要覆盖默认浏览器“禁用”样式。
如果您有多个这样的按钮,则每个按钮都需要一个唯一的父按钮,以便能够区分单击了哪个按钮,因为使用pointer-events:none
时,单击目标是按钮的父按钮,而不是按钮本身。 (或者你可以测试点击坐标,我猜......)。
如果您需要支持旧浏览器,请检查哪些支持pointer-events
:http://caniuse.com/#search=pointer-events
答案 4 :(得分:3)
disabled
元素不允许用户与它们进行交互。
所以:不,你不能在onclick
按钮上加disabled
并期望它发射。
答案 5 :(得分:0)
eval `make shortcut-subtest1`
subtest1 -g test
<input id="idButton" type="button" value="click" disabled>
上面的示例适用于需要捕获事件的禁用按钮的JQuery。
答案 6 :(得分:0)
您无法点击已停用的按钮,但可以点击已停用的链接
$('.btn').on('click', function(e) {
e.preventDefault();
$txt = $('div.text');
if($(this).attr('disabled')){
$txt.html('CLICKED, BUT DISABLED!!');
}else{
$txt.html('Not disabled. =)');
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>
&#13;
答案 7 :(得分:0)
如何在某个元素中包含按钮并转而点击此元素呢?
<span id="container">
<input type="button" value="click" disabled>
</span>
使用Javascript:
$("#container").click(function(){
alert("Element clicked!");
})
答案 8 :(得分:-3)
您应该使用disabled =“disabled”而不仅仅是禁用。
$('input:disabled').val('disabled');