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事件监听器按钮按不工作

回答

相关问题