切換事件監聽器

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); 
});