Javascript 禁用按钮仍然监听点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37109771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabled button still listens to click event
提问by DonMB
I have a problem in a form where I do some jquery validations. If a specific input field is not filled out, it should disable a "step forward" button by adding a disabled attribute:
我在进行一些 jquery 验证的表单中遇到问题。如果未填写特定输入字段，则应通过添加禁用属性来禁用“前进”按钮：
if errors
$('.btn-move-forward').attr("disabled", true)
that works but I also have a click event on that button: (coffeescript)
可行，但我在该按钮上也有一个点击事件：（咖啡脚本）
$('.btn-move-forward').click ->
$('#step2, #step3').toggle()
I expect .btn-move-forwardto not fire the click event when the button is disabled but it does!!
我希望.btn-move-forward在按钮被禁用时不会触发点击事件，但确实如此！！
First: I don't understand why because every browser spec defines that this should not happen. Anyways, I tried to bypass it by doing the following stuff:
第一：我不明白为什么，因为每个浏览器规范都定义了这种情况不应该发生。无论如何，我尝试通过执行以下操作来绕过它：
$('.btn-move-forward').click ->
if !$(this).is(:disabled)
$('#step2, #step3').toggle()
or this
或这个
$('.btn-move-forward').click ->
if $(this).prop("disabled", false)
$('#step2, #step3').toggle()
or combining the event listeners like this:
或者像这样组合事件侦听器：
$('.btn-move-forward').on 'click', '.btn-move-forward:enabled', ->
$('#step2, #step3').toggle()
No, all of this won't work properly. The button still behaves as a move-forward button.
不，所有这些都不会正常工作。该按钮仍用作向前移动按钮。
All I want is the button not listening to onclickif it is disabled.
我想要的只是按钮onclick在被禁用时不听。
回答by Rory McCrossan
The disabledproperty only applies to form elements. This means that unless the .btn-move-forwardelement is a <button>or <input type="button">then the disabledattribute will have no effect.
该disabled属性仅适用于表单元素。这意味着，除非该.btn-move-forward元素是一个<button>或<input type="button">则disabled属性将没有任何效果。
You can see a working example using a buttonhere:
您可以button在此处查看使用 a 的工作示例：
$('.btn-move-forward').prop("disabled", true).click(function() {
console.log('Moving forward...');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="btn-move-forward">Move forward</button>回答by Rohit
Please off the click event
请关闭点击事件
$('.btn-move-forward').off('click');
回答by Luka Jacobowitz
Change it to use prop()instead.
改为使用它prop()。
$('.btn-move-forward').prop("disabled", true)
回答by Pasindu Jayanath
to disable:
禁用：
$('.btn-move-forward').prop("disabled", true);
to re-enable:
重新启用：
$('.btn-move-forward').removeClass('disabled'); // do this also.
$('.btn-move-forward').prop("disabled", false);
回答by surinder singh
use pointer-events:none; where you don't needed click events
使用指针事件：无；不需要点击事件的地方
.btn[disabled]{pointer-events:none;}
document.querySelectorAll(".btn").forEach(btn=>{
btn.addEventListener("click", e=>{
alert(e.target.innerText)
})
}).btn{
display:inline-block;
background: #3f51b5;
color: #fff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
0 3px 1px -2px rgba(0,0,0,.2),
0 1px 5px 0 rgba(0,0,0,.12);
border: none;
border-radius: 2px;
position: relative;
height: 36px;
margin: 10px;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
}
.btn[disabled]{pointer-events:none; opacity:0.5}<div class="btn">Clickable button</div>
<div class="btn">Clickable 2 button</div>
<div class="btn">Clickable 3 button</div>
<hr />
<div class="btn" disabled>Disabled button</div>
<div class="btn" disabled>Disabled 2 button</div>
<div class="btn" disabled>Disabled 3 button</div>回答by Ravi
I am too late by too many year :P Still if someone can get help out of my answer: HTML :
我太晚了太多年了 :P 如果有人可以从我的答案中获得帮助：HTML ：
<button type="button" id="verifyBtn" class="disabled" onClick="submitForm(this);"></button>
JS:
JS：
To enable
$j('#verifyBtn').addClass('disabled');$j('#verifyBtn').attr('disabled','disabled');To disable
$j('#verifyBtn').removeClass('disabled');$j('#verifyBtn').removeAttr('disabled','disabled');
启用
$j('#verifyBtn').addClass('disabled');$j('#verifyBtn').attr('disabled','disabled');禁用
$j('#verifyBtn').removeClass('disabled');$j('#verifyBtn').removeAttr('disabled','disabled');
回答by mahfuz
I think, disabling clickevent is not a good idea. Because you have to enable clickevent again, if you enable the button.
我认为，禁用click事件不是一个好主意。因为你必须click再次启用事件，如果你启用按钮。
For disabled button, I just check disabled state, if disabledreturn.
对于disabled button，我只是check disabled state，如果disabledreturn。
Html button:
html按钮：
<span class="btn btn-sm btn-primary btn-move-forward">Book</span>
How to disable button:
如何禁用按钮：
$('.btn-move-forward').addClass('disabled');
Click event:
点击事件：
$('.btn-move-forward').on('click', function(){
if($(this).hasClass('disabled')) {
console.log('-- Button is disabled. Return from here. --');
return false;
}
// write code for click event here
$('#step2, #step3').toggle()
});
