我是否使用`button.disabled = true;`错误地

Question

我正在尝试在播放电影剪辑的动画CC中构建互动，并且按钮单击后消失。

当电影剪辑在主要背景上播放时，我试图暂时禁用其他按钮，但它的播放不好。

单击处理程序的代码段：

exportRoot.btn_cook.addEventListener("click", cook_clickHandler.bind(this));
function cook_clickHandler(){
    exportRoot.cook.gotoAndPlay(1); //play the info clip
    exportRoot.btn_cook.visible = false; //hide button for no replays
    disableAll();
}

disableAll();对画布上的每个按钮进行以下操作：

if(exportRoot.btn_receive.visible == true){
    exportRoot.btn_receive.disabled = true;
}

我遇到了一些麻烦，试图弄清楚如何正确使用它。当我通过互动运行时，即使我据称禁用了它们，我仍然可以单击按钮？

此演示不会在github上加载声音，但否则可以使用。单击此处查看它。

Answer 1

我有同样的问题，所以我还有另一种方法：

您可以尝试删除eventListener 单击，例如：

if(!exportRoot.btn_receive.hasEventListener("click")){
    exportRoot.btn_receive.removeEventListener("click", cook_clickHandler);
}

当您希望再次启用此功能时，添加eventListener。

Answer 2

禁用属性是一个布尔属性。这意味着仅它的存在足以使元素被禁用。您设定的价值没有什么区别。您需要从元素中删除属性以删除残疾人效应。

删除事件的听众可以治疗症状，它不会成为问题的核心。

也（fyi），visibility属性获取"visible"或"hidden"的值，而不是true或false。

这是一个简单的示例，说明如何应用和禁用（无双关）残疾人属性：

btnToggle.addEventListener("click", function(){
  var elems = document.querySelectorAll(".disableEnable");
  
  // Loop through each element in the class
  elems.forEach(function(element){
    
    // Check to see if the first element has the disabled attribute
    // the value of the attribute doesn't matter. If the attribute
    // is present, the element is currently disabled.
    if(element.getAttribute("disabled")){
      
      // Element is disabled, so enabled it by removing
      // the attribute (not by setting a value)
      element.removeAttribute("disabled");
    } else {
      // Element is enabled, so disable it by adding the disabled
      // attribute. Again, the value doesn't matter, but convention
      // says that we set a value of "disabled" to convey that it is
      // a boolean attribute.
      element.setAttribute("disabled", "disabled");
    }
                           
  });
    
});

<button id="btnToggle">Disable / Enable</button>
<button class="disableEnable">Test Button</button>
<input class="disableEnable">
<input type="text" class="disableEnable">