如何将两个事件侦听器/动作添加到一个按钮

Question

我正在尝试暂停并在“按钮”上播放，但不确定如何执行。 我猜想它需要知道一个单击是活动的才能切换到另一个，但是我不确定如何做到这一点。

// Initialize variables

var button = document.getElementById("button");
var button2 = document.getElementById("button2");
var rect = document.getElementById("rect");
var polygon = document.getElementById("polygon");
var circle = document.getElementById("circle");


// Define functions

function play() {
    rect.setAttribute("class", "anim");
    polygon.setAttribute("class", "anim");
    circle.setAttribute("class", "anim");

}

function pause() {
    rect.setAttribute("class", "pause");
    polygon.setAttribute("class", "pause");
    circle.setAttribute("class", "pause");
}

// Add event listeners

button.addEventListener("click", play, false);

button2.addEventListener("click", pause, false);

Answer 1

您可以改写一个切换处理程序：

function playPause()
{
    if (this.playState) {
        rect.className = polygon.className = circle.className = 'pause';
    } else {
        rect.className = polygon.className = circle.className = 'anim';
    }
    // update button text to indicate state?
    this.playState = !this.playState;
}

它在DOM元素本身上保持状态，并在暂停和播放之间切换。

Answer 2

如果您使用两个不同的按钮，请尝试以下操作：

    var isplaying = false;
    function play() {
    isplaying = true;
        rect.setAttribute("class", "anim");
        polygon.setAttribute("class", "anim");
        circle.setAttribute("class", "anim");

    }

    function pause() {
isplaying = false;
        rect.setAttribute("class", "pause");
        polygon.setAttribute("class", "pause");
        circle.setAttribute("class", "pause");
    }

    // Add event listeners

    button.addEventListener("click",function(){ if(!isplaying){
button.disable(); button2.enable(); play();}});

    button2.addEventListener("click",function(){ if(isplaying){
button2.disable(); button.enable(); pause();}});