切换事件侦听器

Question

我正在尝试创建一个允许我切换元素的 eventListener 的函数。

在下面的示例中，我有三个按钮：main、on 和关闭。当我点击 on 按钮时， main按钮变为功能。单击 off 按钮后， main 按钮应该不再有效（但现在仍然有效）。

现在我可以通过第二次单击 on 按钮来实现所需的行为，但我想这是一个糟糕的巧合，它是不应该那样工作。

也许我应该补充一点，我想在不使用 jQuery 或类似工具的情况下解决这个问题，它需要是一个函数，因为我要将它用于很多按钮。

（我怀疑范围问题导致了问题（clickHandler 调用函数 activate 按钮与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);
});

Answer 2

下面的代码有助于在 eventListener 的两个函数之间切换：

   var playmusic=false;
    function playSound() {
      const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
      audio.currentTime = 0
      audio.play()
      playmusic=true;
    }
    function stopSound() {
      const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
      audio.pause()
      playmusic=false;
    }
    
    window.addEventListener('keydown',
    function(){playmusic?stopSound():playSound()} )

切换事件侦听器

Toggle Event Listeners

javascript

scope

function

event-listener

dom-events