javascript - 在 vanilla JavaScript 和 jQuery 中禁用按钮

Question

原生 JavaScript

在原生 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 接口(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

不过，我似乎无法用 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”的输出顺序错误。

我能想出的最简单的代码来模拟 vanilla 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')"/>

当然，那是可笑的复杂和“hacky”代码来实现像禁用按钮这样简单的事情。

---

我的问题

• 为什么 jQuery(与 vanilla JS 不同)在禁用按钮时不禁用事件？
• 这是 jQuery 中的错误还是功能？
• 我有没有忽略什么？
• 是否有更简单的方法来获得 jQuery 中的预期行为？

Answer 1

为了达到预期的结果，您可以在 jQuery 触发的 click 处理程序中使用 .isTrigger 来确定事件是否由 javascript 触发，而不是用户操作。

将属性事件监听器定义为命名函数，其中可以传递 this 以在 if 条件下检查 disabled 属性 if alert () 被调用，或者不被调用。

使用.attr("disabled", "disabled")在元素处设置disabled，.removeAttr("disabled")为删除属性； .attr("onclick", null) 删除事件属性 onclick 处理程序； .attr("onclick", "handleClick(true)") 重置事件属性。

<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>