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

Question

我正在尝试在 Animate 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(); 对 canvas 上的每个按钮执行以下操作：

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

我在尝试弄清楚如何正确使用它时遇到了一些麻烦。当我运行通过交互时，我仍然可以点击按钮，即使我应该禁用它们？

此演示不会在 GitHub 上加载声音，但它可以正常工作。 Click here to see it.

Answer 1

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

您可以尝试删除 eventListener click，像这样：

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

如果您希望再次启用此功能，请添加 eventListener。

Answer 2

禁用属性是布尔属性。这意味着仅仅它的存在就足以导致该元素被禁用。将值设置为什么都没有关系。您需要从元素中删除该属性才能删除禁用的效果。

移除事件监听器治标不治本，并没有触及问题的核心。

此外（仅供参考），visibility 属性得到的值是 "visible" 或 "hidden"，而不是 true 或 false。

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

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

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

Am I using `button.disabled = true;` incorrectly?

javascript

easeljs

animate-cc