通过触摸屏激活时onmousedown和onmouseup不起作用

问题描述

我有两个按钮应该用作网页上的游戏的触摸屏控件，每个按钮在按住时都可以沿一个方向移动球拍，它们均按预期操作，但仅在计算机上用鼠标单击它们时。当在触摸屏上单击它们时，所有其他按钮都可以使用，但是这些按钮都不使用onmousedown和onmouseup。任何人都知道发生了什么事以及如何解决？

<canvas id="myCanvas" width="480" height="320" style = 'display : none;' class = 'keepIt'></canvas>
<br>

<div style = 'display: none; width: 30%; margin: auto;' id = 'b'>
<button style = 'font-size:50px;' onmousedown  = 'touchLeft()' onmouseup = 'liftLeft()'> left</button>
<button style = 'font-size: 50px;' onmousedown = 'touchRight()' onmouseup = 'liftRight()'> right</button>
</div>
<script>
 
 var canvas = document.getElementById("myCanvas");

var b = document.getElementById("b");

var ctx = canvas.getContext("2d");
var x = canvas.width/2;

var y = canvas.height-40;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var difficulty = 10
var score = 0
var gameRunning = false
var paused = false


function paddleMoveLeft(){   paddleX -= 5;
    if (paddleX < 0){
        paddleX = 0;
    }}
function paddleMoveRight(){  paddleX += 5;
    if (paddleX + paddleWidth > canvas.width){
        paddleX = canvas.width - paddleWidth;
    }}
 function touchLeft(){leftPressed = true;}
 function liftLeft(){leftPressed = false;}
 function touchRight(){rightPressed = true;}
function liftRight(){rightPressed= false;}
function playGame(){
b.style.display = 'block'
canvas.style.display = 'block'

function playPause(){
if(paused === true){paused = false}
else {paused = true}
}
function drawBall() {
    ctx.beginPath();
   ctx.arc(x,y,ballRadius,Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawScore() {
    ctx.font = "50px ";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score,8,20);
}
function draw() {
 if (paused === false){
 ctx.clearRect(0,canvas.width,canvas.height);
    drawBall();
    drawPaddle();
   drawScore();
   x += dx;
    y += dy;
  if (rightM = true) {paddleMoveRight();}
if (leftM = true ){paddleMoveLeft();}
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
        difficulty = difficulty + 1.5;
  score = score + 1;
  }
    else {
       x = canvas.width/2;
      y = canvas.height-40;
        dy = -dy;
     alert("GAME OVER! you scored " + score);
         ctx.clearRect(0,canvas.height);
        clearInterval(interval);
  score = 0;

canvas.style.display = 'none';
b.style.display = 'none';
}
}

if(rightPressed) {
  paddleMoveRight();
}
else if(leftPressed) {
  paddleMoveLeft();
}

}
}
document.addEventListener("keydown",keyDownHandler,false);
document.addEventListener("keyup",keyUpHandler,false);
function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}
var interval = setInterval(draw,difficulty);}
 
    
 
</script>


<div>
<button onclick = 'hide()'> Hide or show the games</button>
<br>
<button onclick = 'PausePlay()'> Pause/play games</button>
<br>

</div>
<br><br><br><br>
<button onclick = 'playGame()'>play keep it alive </button>

解决方法

您需要使用ontouchstart和ontouchend代替onmousedown和onmouseup。