Я использую `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(); выполняет следующие действия для каждой кнопки на холсте:

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

У меня возникли некоторые проблемы при попытке выяснить, как использовать это правильно. Когда я сталкиваюсь с взаимодействием, я все еще могу нажать на кнопки, хотя я предположительно их отключил?

Эта демонстрация не загружает звук на GitHub, но работает иначе. Click here to see it.

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