Mousedown事件監聽器按鈕按不工作

我正在用普通香草建立一個pong模擬器javascript，你可以在Codepen或GitHub上看到代碼。Mousedown事件監聽器按鈕按不工作

我想使用電腦的按鍵控制和移動設備的屏幕按鍵。我在屏幕上按下按鈕時遇到問題。在啓動腳本的149行，我試圖與事件偵聽器來更新leftButtonPressed變量的值：

//Storing control button presses 

var leftButton = document.getElementById('left-button'); //Get left button 
var leftButtonPressed = false; //variable to store whether or not the left button is pressed 

var leftMouseDown = function(){ //function to update leftButtonPressed 
    leftButtonPressed = true; 
}; 

var leftMouseUp = function(){ //funciton to update leftButtonPressed 
    leftButtonPressed = false; 
}; 

//Event listeners to see if left button is pressed 

leftButton.addEventListener('mousedown',leftMouseDown,false); 
leftButton.addEventListener('mouseup',leftMouseUp, false); 

//Printing left button press to screen 

var buttonPressedText = document.createTextNode(leftButtonPressed); 
var buttonPressedTextElement = document.getElementById('button-pressed'); 
buttonPressedTextElement.innerHTML = ''; 
buttonPressedTextElement.appendChild(buttonPressedText);

爲什麼我leftButtonPressed變量更新？

以下是額外的信息來了解腳本的上下文：

我使用以下方法來更新我的對象，並以60fps重新繪製在畫布上：

//Call step 60 times per second 

var animate = window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    function (callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
; 

//Loop through update, render, animate 

var step = function() { 
    score(); 
    update(); 
    render(); 
    animate(step); 
};

正如你所看到的，每次更新播放器對象時都會運行更新leftButtonPress的腳本部分。

感謝您的幫助:)

來源

2015-02-08 ross

它看起來像你在每次調用播放器「更新」方法中反覆調用'.addEventListener（）'。這將繼續添加和重新添加這些事件處理程序而不刪除以前添加的事件處理程序。幾秒鐘後，將有數百和數百個每個事件處理程序的副本，並且它們都將在每個事件上運行。 – Pointy 2015-02-08 20:06:29

這正是我想要寫的。這就是發生了什麼。 – Alex 2015-02-08 20:16:57

感謝Pointy，將更新函數之外的事件監聽器移動到屏幕上。 – ross 2015-02-08 23:21:50

我不得不重寫你的HTML也因爲你的Git版本沒有顯示的按鈕。我將<div id="controls" class="visible-xs-block">更改爲<div id="controls">以查看按鈕。我改變了你的JS，這樣監聽器纔會被應用一次。因此我介紹了一次被調用的。這是一個小黑客，你打印狀態下訪問該地區：

var self = this; 
var leftMouseDown = function(){ //function to update leftButtonPressed 
    leftButtonPressed = true; 
    self.buttonPressedTextElement.innerHTML = 'pressed'; 
}; 

var leftMouseUp = function(){ //funciton to update leftButtonPressed 
    leftButtonPressed = false; 
    self.buttonPressedTextElement.innerHTML = 'not pressed'; 
};

更改代碼播放器：

function Player() { 
    this.build() 
    this.paddle = new Paddle(playerStartPositionX, playerStartPositionY); 
    this.score = 0; 
};

新代碼播放器製作：

Player.prototype.build = function() { 
    //Storing control button presses 

    var buttonPressedText = document.createTextNode(leftButtonPressed); 
    this.buttonPressedTextElement = document.getElementById('button-pressed'); 
    this.buttonPressedTextElement.innerHTML = ''; 
    this.buttonPressedTextElement.appendChild(buttonPressedText); 

    var leftButton = document.getElementById('left-button'); //Get left button 
    var leftButtonPressed = false; //variable to store whether or not the left button is pressed 

    var self = this; 
    var leftMouseDown = function(){ //function to update leftButtonPressed 
     leftButtonPressed = true; 
     self.buttonPressedTextElement.innerHTML = 'pressed'; 
    }; 

    var leftMouseUp = function(){ //funciton to update leftButtonPressed 
     leftButtonPressed = false; 
     self.buttonPressedTextElement.innerHTML = 'not pressed'; 
    }; 

    //Event listeners to see if left button is pressed 

    leftButton.addEventListener('mousedown',leftMouseDown,false); 
    leftButton.addEventListener('mouseup',leftMouseUp, false); 
}

新代碼Player更新：

Player.prototype.update = function() { 
    for(var key in keysDown) { 
     var value = Number(key); 
     if(value == 37) { // left arrow pressed 
      this.paddle.move(-playerSpeed, 0); 
     } else if (value == 39) { // right arrow pressed 
      this.paddle.move(playerSpeed, 0); 
     } else { 
      this.paddle.move(0, 0); 
     }; 
    }; 
};

這樣做你要。正如我所說，適用於git版本

來源

2015-02-08 20:31:12 Alex

Mousedown事件監聽器按鈕按不工作

回答

相關問題