Два раза срабатывает событие onClick

Есть одна панель и к ней реализована кнопка блокировки этой панели.

static lock = {
    querySelector: document.querySelector('.lock'),
    action () {
        let lockBtn = Toolbar.lock.querySelector;
        if (lockBtn.classList.contains('unlocked')) {
            lockBtn.classList.remove('unlocked');
            lockBtn.classList.add('locked');
            Toolbar.querySelector.removeEventListener("click", Toolbar.onClick);
            lockBtn.addEventListener("click", Toolbar.lock.action);
        }
        else {
            lockBtn.classList.remove('locked');
            lockBtn.classList.add('unlocked');
            lockBtn.removeEventListener("click", Toolbar.lock.action);
            Toolbar.querySelector.addEventListener("click",Toolbar.onClick);
        }
        console.log(lockBtn.classList.contains('unlocked'));
    }
};

static onClick (event) {
    let dataAction = event.target.dataset.action;
    if (dataAction) {
        Toolbar[dataAction].action();
    }
};

Панель решил реализовать через класс. Кнопка блокировки - lock. Так как это не единственная кнопка, то вместо того, чтобы вешать на каждую кнопку разное событие решил решить проблему через делигирование событий методом onClick. Потом в коде повесил этот метод, как обработчик на всю панель.

 Toolbar.querySelector.addEventListener("click",Toolbar.onClick);

Почему-то при первом нажатии на кнопку lock она выполняет свою функцию корректно. А далее почему то срабатывает два раза (то есть вместо того чтобы разблокироватся - разблокируется и снова блокируется), увидел по логам консоли. Как можно решить данную проблему?