切换事件监听器

Question

我想做一个功能，可以让我切换元素的eventListener。

在下面的例子中，我有三个按钮：主，上和关闭。当我点击按钮时，按钮变为有效。当我点击off按钮，主按钮不应该工作了（但现在它仍然）。

现在我可以通过点击在第二次按钮实现期望的行为，但我想这是一个糟糕的巧合，它不应该是这样的。

也许我应该补充一点，我想不使用jQuery或类似的工具，它需要是一个函数，因为我打算将它用于很多按钮。

（我怀疑事情与范围引起该问题（clickHandler事件调用函数当激活按钮是不一样的clickHandler事件调用函数禁用的按钮）时，但我不能想办法对其进行测试。）

// buttons definitions, not important 
 
var mainButton = document.querySelector("#mainButton"); 
 
var onButton = document.querySelector("#onButton"); 
 
var offButton = document.querySelector("#offButton"); 
 

 
// main function 
 
var toggleButtons = function(toggleVal, button, element) { 
 
    var activateButton, clickHandler, disableButton; 
 

 
    // callback function for listener bellow 
 
    clickHandler = function() { 
 
     document.querySelector(element).classList.toggle("yellow"); 
 
    }; 
 

 
    activateButton = function() { 
 
     button.addEventListener("click", clickHandler); 
 
    }; 
 
    disableButton = function() { 
 
     button.removeEventListener("click", clickHandler); 
 
    }; 
 

 
    // when first argument is 1, make the button functional, otherwise disable its functionality 
 
    if (toggleVal === 1) { 
 
     activateButton(); 
 
    } else { 
 
     disableButton(); 
 
    } 
 
}; 
 

 
// when onButton is clicked, call main function with arguments 
 
// this works 
 
onButton.addEventListener("click", function() { 
 
    toggleButtons(1, mainButton, "body"); 
 
}); 
 

 
// this fails to disable the button 
 
offButton.addEventListener("click", function() { 
 
    toggleButtons(0, mainButton); 
 
});

.yellow { 
 
    background-color: yellow; 
 
}

<button type="button" id="mainButton">mainButton 
 
</button> 
 
<button type="button" id="onButton">onButton 
 
</button> 
 
<button type="button" id="offButton">offButton 
 
</button> 
 
<p>mainButton: toggles background color on click 
 
</p> 
 
<p>onButton: turns on mainButtons's functionality</p> 
 
<p>offButton: supposed to turn off mainButton's functionality</p>

Answer 1

var mainButton = document.querySelector("#mainButton"); 
var onButton = document.querySelector("#onButton"); 
var offButon = document.querySelector("#offButton"); 

var element; // declare the element here and change it from toggleButtons when needed. 

function clickHandler() { 
    document.querySelector(element).classList.toggle('yellow'); 
} 
function activateButton(button) { // You missed this part 
    button.addEventListener('click', clickHandler); 
} 
function disableButton(button) { // You missed this part 
    button.removeEventListener('click', clickHandler); 
} 

function toggleButtons(value, button) {  
    if (value === 1) { 
     activateButton(button); // You missed this part 
    } else { 
     disableButton(button); // You missed this part 
    } 
}; 

onButton.addEventListener('click', function() { 
    element = 'body'; // you can change it to some other element 
    toggleButtons(1, mainButton); 
}); 
offButton.addEventListener('click', function() { 
    element = 'body'; // you can change it to some other element 
    toggleButtons(0, mainButton); 
});