问题描述
在普通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中禁用按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!