Set button state - Create.js/Easel.js

In Adobe Animate HTML5 Canvas (Create.js/Easel.js), I am trying to set the state of a button, but not working with various code:

this.retinoscopeButton.addEventListener("click", retinoscope.bind(this));

/*function retinoscope(evt) {
    var retinoscopeButtonState = evt.currentTarget.state = !evt.currentTarget.state;
    if (retinoscopeButtonState) {
        alert(retinoscopeButtonState);
        this.retinoscopeButton.upState = this.retinoscopeButton.downState;
    } else {
        this.retinoscopeButton.downState = this.retinoscopeButton.upState;
    }
}*/

var retinoscopeButtonState = 'up';

function retinoscope(evt){ 
    if (retinoscopeButtonState == 'up'){
    this.retinoscopeButton.upState = this.retinoscopeButton.downState;
        retinoscopeButtonState = 'down';
    } else if (retinoscopeButtonState == 'down'){
    this.retinoscopeButton.downState = this.retinoscopeButton.upState;
        retinoscopeButtonState = 'up';
    }
}

This works for me...

Note that this is using a MovieClip with three keyframes for the different 'states' in the button MC retinoscopeButton

var toggle;

if (!root.retinoscopeButton.hasEventListener("click")) {
    toggle = false;
    root.retinoscopeButton.addEventListener("click", retinoscopeButtonClickHandler.bind(this));
}


root.retinoscopeButton.addEventListener("mouseover", retinoscopeButtonRollOverHandler.bind(this));
root.retinoscopeButton.addEventListener("mouseout", retinoscopeButtonRollOutHandler.bind(this));


function retinoscopeButtonClickHandler() {
    if (toggle == false) {
        root.retinoscopeButton.gotoAndStop(2);
        toggle = true;
    } else if (toggle == true) {
        root.retinoscopeButton.gotoAndStop(0);
        toggle = false
    }
}

function retinoscopeButtonRollOverHandler() {
    if (toggle == false) {
        root.retinoscopeButton.gotoAndStop(1);
    }
}

function retinoscopeButtonRollOutHandler() {
    if (toggle == false) {
        root.retinoscopeButton.gotoAndStop(0);
    }
}