在vanilla JavaScript和jQuery中禁用按钮
在vanilla JavaScript和jQuery中禁用按钮
提问于 2016-08-06 21:44:38
香草JavaScript
在vanilla JavaScript中，可以使用以下语句轻松地启用和禁用按钮：
button.disabled = state;这在人类尝试单击按钮和以编程方式单击按钮时都有效：
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接口时也适用：
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
不过，我似乎不能用jQuery做同样的事情：
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();都会触发事件，即使该按钮被禁用！
此外，"world“和"Hello”的输出顺序是错误的。
我能想出的模拟普通JavaScript版本行为的最简单代码是：
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')"/>
当然，要实现像禁用按钮这样简单的功能，需要极其复杂和“老套”的代码。
我的问题
- 为什么jQuery -不像普通的JS -在禁用按钮时不禁用事件？
- 这是jQuery中的错误还是功能？
- is something I'm jQuery有更简单的方法在jQuery中获得预期的行为吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38804924
复制相关文章
相似问题