在原始JavaScript和jQuery中禁用按钮 [英] Disabling a button in vanilla JavaScript and in jQuery
问题描述
在普通JavaScript中，可以使用以下语句轻松启用和禁用按钮:
In vanilla JavaScript, one can easily enable and disable a button using the following statement:
button.disabled = state;
这在人类尝试单击按钮和以编程方式单击按钮时均有效:
This works both when humans try to click a button and when buttons are clicked programmatically:
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('world');
});
button.disabled = true;
button.click(); // No output
button.disabled = false;
button.click(); // Output : "Hello" and "world
button.disabled = true;
button.click(); // No output<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>这在使用 MouseEvent 界面时也适用:
This also works when using the MouseEvent interface:
var button = document.getElementById('myButton');
var click = new MouseEvent("click", {
"view": window
});
button.addEventListener('click', function() {
alert('world');
});
button.disabled = true;
button.dispatchEvent(click); // No output
button.disabled = false;
button.dispatchEvent(click); // Output : "Hello" and "world
button.disabled = true;
button.dispatchEvent(click); // No output<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>尽管如此，我似乎无法使用jQuery进行同样的操作:
I can't seem to be able to do the same with jQuery, though :
var button = $("#myButton");
button.on("click", function() {
alert("world");
});
button.prop("disabled", true);
button.click(); // Output : "world" and "Hello"
button.prop("disabled", false);
button.click(); // Output : "world" and "Hello"
button.prop("disabled", true);
button.click(); // Output : "world" and "Hello"<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/> button.prop("disabled"，true); 和 button.attr("disabled"，true); 只需更改 disabled属性，但都不会禁用实际的点击事件.这意味着，即使按钮被禁用，只要调用 button.click(); 都会触发事件！
Both button.prop("disabled", true); and button.attr("disabled", true); simply change the disabled property of the button element, but neither disables the actual click event. This means that events are triggered whenever button.click(); is called, even if the button is disabled!
此外，世界"和"Hello"输出顺序错误.
Additionally, "world" and "Hello" are output in the wrong order.
我可以想出的最简单的代码来模拟原始JavaScript版本的行为:
The simplest code I could come up with to emulate the behavior of the vanilla JavaScript versions, is this :
var button = $("#myButton");
button.on("click", function() {
alert("world");
});
button.disable = (function() {
var onclick = null;
var click = [];
return function(state) {
if(state) {
this.prop('disabled', true);
if(this.prop('onclick') !== null) {
onclick = this.prop('onclick');
this.prop('onclick', null);
}
var listeners = $._data(this.get()[0], "events");
listeners = typeof listeners === 'undefined' ? [] : listeners['click'];
if(listeners && listeners.length > 0) {
for(var i = 0; i < listeners.length; i++) {
click.push(listeners[i].handler);
}
this.off('click');
}
} else {
this.removeProp('disabled');
if(onclick !== null) {
this.prop('onclick', onclick);
onclick = null;
}
if(click.length > 0) {
this.off('click');
for(var i = 0; i < click.length; i++) {
this.on("click", click[i]);
}
click = [];
}
}
}
})();
button.disable(true);
button.click(); // No output
button.disable(false);
button.click(); // Output : "Hello" and "world
button.disable(true);
button.click(); // No output<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>当然，这是可笑的，令人费解和"hacky".代码来实现像禁用按钮一样简单的事情.
That is, of course, ridiculously convoluted and "hacky" code to achieve something as simple as disabling a button.
- 为什么jQuery(与普通JS不同)在禁用按钮时不禁用事件?
- 这是否被认为是jQuery中的错误或功能?
- 有什么我要忽略的东西吗?
- 是否有更简单的方法在jQuery中获得预期的行为?
推荐答案
要获得预期的结果，您可以在jQuery触发的 click 处理程序中利用 .isTrigger 由 javascript 触发，而不是由用户操作触发.
To achieve expected result, you can utilize .isTrigger within jQuery triggered click handler to determine if event is triggered by javascript, and not user action.
将属性事件侦听器定义为命名函数，如果 alert，则可以传递被调用或未被调用. this 以检查 if 条件下的 disabled 属性()
Define attribute event listener as a named function, where this can be passed to check disabled property at if condition if alert() is called, or not called.
使用 .attr("disabled"，"disabled")将元素 .removeAttr("disabled")上的 disabled 设置为删除属性； .attr("onclick"，null)删除事件属性 onclick 处理程序； .attr("onclick"，"handleClick(true)")重置事件属性.
Use .attr("disabled", "disabled") to set disabled at element, .removeAttr("disabled") to remove attribute; .attr("onclick", null) to remove event attribute onclick handler; .attr("onclick", "handleClick(true)") to reset event attribute.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="button" id="myButton" value="button" onclick="handleClick(this)" />
<script>
function handleClick(el) {
if (el.disabled !== "disabled")
alert("Hello")
}
var button = $("#myButton");
button.on("click", function(e) {
console.log(e);
if (e.isTrigger !== 3 && !e.target.disabled)
alert("world");
});
button.attr("disabled", "disabled");
button.attr("onclick", null);
button.click(); // no output
setTimeout(function() {
button.removeAttr("disabled");
button.attr("onclick", "handleClick(button[0])");
button.click(); // Output : "world" and "Hello"
// click button during 9000 between `setTimeout` calls
// to call both jQuery event and event attribute
}, 1000);
setTimeout(function() {
button.attr("disabled", "disabled");
button.attr("onclick", null);
button.click(); // no output
}, 10000);
</script>这篇关于在原始JavaScript和jQuery中禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
