按下按钮的 Mousedown 事件侦听器不起作用

Question

我正在用普通的 vanilla javascript 构建一个 pong 模拟器，你可以在 Codepen or GitHub.

上查看代码

我想在计算机上使用按键控件，在移动设备上使用屏幕按钮控件。我在按下屏幕按钮时遇到问题。从脚本的第 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 变量没有更新？

以下是理解脚本上下文的额外信息：

我使用以下方法更新我的对象并以 60 fps 重新绘制 canvas：

//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 是运行。

感谢您的帮助:)

Answer 1

我不得不重写你的 HTML 也是因为你的 git 版本没有显示按钮。我将 <div id="controls" class="visible-xs-block"> 更改为 <div id="controls"> 以查看按钮。我更改了您的 JS，以便只应用一次侦听器。因此我引入了一个被调用一次的 Player.prototype.build = function () 。这是访问打印状态的区域的小技巧：

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.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 版本

按下按钮的 Mousedown 事件侦听器不起作用

Mousedown event listener for button press not working

javascript

javascript-events