Javascript 如何暂时禁用按钮上的点击事件而不实际禁用它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4594064/
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
How can I temporarily disable click events on a button without actually disabling it?
提问by Ovesh
Using jQuery, I would like to, without changing the disabledattribute of a given button, disable all click events for it.
使用 jQuery，我想在不更改disabled给定按钮的属性的情况下，禁用它的所有点击事件。
I was thinking of retrieving the click event handlers, unbind them, and storing them (say, using data()).
我正在考虑检索 click 事件处理程序、解除绑定并存储它们（例如，使用data()）。
Then I can re-bind them once the button is enabled again.
然后，一旦再次启用按钮，我就可以重新绑定它们。
回答by David Tang
Not hard to do since jQuery already stores all of its event handlers as data()on the element itself. You can get (and modify) this object through .data().events.
这并不难，因为 jQuery 已经将其所有事件处理程序存储data()在元素本身上。您可以通过.data().events.
Now you can easily save a reference to the handlers with:
现在，您可以使用以下命令轻松保存对处理程序的引用：
events._click = events.click;
events.click = null;
And then restore them by using:
然后使用以下方法恢复它们：
events.click = events._click;
events._click = null;
Note that this won't disable events that are bound via .delegate()or .live(), as they work by event bubbling/propagation. To disable those as well, simply bind a new handler that blocks propagation to ancestor elements:
请注意，这不会禁用通过.delegate()或绑定的事件.live()，因为它们通过事件冒泡/传播工作。要禁用它们，只需绑定一个阻止传播到祖先元素的新处理程序：
events._click = events.click;
events.click = null;
// Block .live() and .delegate()
$("#el").click(function (e) {
e.stopPropagation();
});
You don't even need to unbind this blocker function when it's time to enable the handlers again, since events.click = events._clickwill override the function you just bound with all the old handlers.
当需要再次启用处理程序时，您甚至不需要取消绑定此阻止程序函数，因为events.click = events._click它将覆盖您刚刚与所有旧处理程序绑定的函数。
回答by Shadow Wizard is Ear For You
Here is yet another way:
这是另一种方式：
$("#myButton").click(function() {
if ($(this).attr("temp_disable") == "disabled") {
//nothing to do, temporarily disabled...
}
else {
alert("You clicked me!");
}
});
To "disable" it for 10 seconds:
要“禁用”它 10 秒钟：
$("#myButton").attr("temp_disable", "disabled");
window.setTimeout(function() { $("#myButton").attr("temp_disable", ""); }, 10000);
Live test case: http://jsfiddle.net/yahavbr/ByM6h/
现场测试用例：http: //jsfiddle.net/yahavbr/ByM6h/
回答by Adam
All answers here are now outdated - as of jQuery 1.7 you should use .off()as explained on the official jQuery site
这里的所有答案现在都已过时 - 从 jQuery 1.7 开始，您应该.off()按照官方 jQuery 站点上的说明使用
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>off demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
function flash() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.on( "click", "#theone", flash )
.find( "#theone" )
.text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.off( "click", "#theone", flash )
.find( "#theone" )
.text( "Does nothing..." );
});
</script>
</body>
</html>回答by Thariama
That is the way to go. If you have onclick specified as an attribute you may switch the attribute busing
这就是要走的路。如果您将 onclick 指定为属性，则可以切换属性总线
$(button_element).attr('click', '');
and
和
$(button_element).attr('click', 'do_the_regular_action()');
回答by codingbadger
You can use unbindand bind
您可以使用unbind和bind
$('#control').unbind('click');
$('#control').unbind('click');
and
和
$('#control').bind('click', NameOfFunctionToCall);
$('#control').bind('click', NameOfFunctionToCall);
回答by Malcolm Dwyer
I'll expand on the answer(s) offered by Barry and Thariama... which I think will satisfy Ovesh's objections:
我将扩展 Barry 和 Thariama 提供的答案……我认为这将满足 Ovesh 的反对意见：
You can add a namespace to your event binding. That lets you refer to that specific event binding later, without colliding with other bindings. I think this is cleaner than the accepted answer... (To be fair, this may not have been available in jQuery at the time of the original question).
您可以向事件绑定添加命名空间。这使您可以稍后引用该特定事件绑定，而不会与其他绑定发生冲突。我认为这比接受的答案更清晰......（公平地说，在最初提出问题时，jQuery 中可能还没有提供）。
// A generic click handler:
$('.myButton').click(function() { ... });
// A namespaced click handler:
$('.myButton').bind('click.someSituation', function() { ... });
// Later you can unbind only the handler you want by using the namespace:
$('.myButton').unbind('click.someSituation');
// The default click handler still works.
回答by Nilesh Rahinj
Instead of doing this thing Use Core Javascript to do this task e.g. Look following example.
而不是做这件事使用核心Javascript来完成这个任务，例如看下面的例子。
function MakeSaveDisabled(flg) {
if (flg != null) {
$(".btnpost").each(function () {
this.removeAttribute("disabled");
if (this.hasAttribute("oclickevt")) {
this.setAttribute("onclick", this.getAttribute("oclickevt"));
}
});
}
else {
$(".btnpost").each(function () {
this.setAttribute("disabled", "true");
if (this.getAttribute("onclick") != null) {
this.setAttribute("oclickevt", this.getAttribute("onclick"));
}
this.removeAttribute("onclick");
});
}
}
Save the javascript function in some temporary attribute and bind it when you required.
将 javascript 函数保存在某个临时属性中，并在需要时绑定它。
