javascript - onmousedown/onmouseup 功能不起作用

Question

我有一个矩形，我正在尝试使用 javascript 移动它。我可以使用函数让它左右移动，但是当我按住鼠标时它不会继续移动。这是我的 html 代码:

<button onmousedown="moveLeft();" onmouseup="stopMove();">LEFT</button>
<button onmousedown="moveRight();" 
onmouseup="stopMove();">RIGHT</button><br><br>

这是我的 JavaScript 代码(条件语句只是为了让矩形不会移出 Canvas ):

function moveLeft () {
    xx-=20; 
    if (xx<0) { 
        xx=0;
    }
}

function moveRight() {
    xx+=20; 
    if (xx>400) { 
        xx=400;
    }
}

function stopMove () {
    xx+=0;
}

Answer 1

当您按下鼠标按钮时，mousedown 事件将仅触发一次。当您按住按钮时，它不会连续发射。您需要做的是使用 timer 开始移动，然后在鼠标松开 上停止计时器。

此外，请勿使用内联 HTML 事件处理程序(onmouseover、onmouseout 等)。 <强> Here's 为什么。

最后，由于 moveLeft 和 moveRight 函数本质上是同一件事，因此可以将它们组合成一个函数，该函数仅接受确定方向的参数。

这是一个工作示例:

// Get references to the HTML elements you'll need to interact with:
var btnLeft = document.getElementById("btnLeft");
var btnRight = document.getElementById("btnRight");
var box = document.getElementById("box");

// Set up event handlers for the HTML elements in JavaScript, using modern
// standards, not in the HTML. Both the left and right buttons need to 
// call the same function, but with a different argument value. This is
// why the events are being bound to another function that wraps the actual
// call to the move function (so that an argument can be passed).
btnLeft.addEventListener("mousedown", function(){ move(-20); });
btnRight.addEventListener("mousedown", function(){ move(20); });
btnLeft.addEventListener("mouseup", stopMove);
btnRight.addEventListener("mouseup", stopMove);

// The counter needs to be accessible between calls to move
var xx = 0;

// We'll start an automatic timer, but we'll need to stop it later
// so we need a variable set up for that.
var timer = null;

// Only one function is needed to address the move operation
// The argument is what determines the direction
function move(amount) {

    // Stop any previous timers so that we don't get a runaway effect
    clearTimeout(timer);
    
    xx += amount; 
    
    // Check the new position to see if it is off the visible page
    if (xx < 0){
        xx = window.innerWidth;
    } else if(xx > window.innerWidth){
        xx = 0;
    }
    
    // Just displaying the current value
    box.textContent = xx;
    
    // Move the box to the new location
    box.style.left = xx + "px";
    
    // Run the timer after a 250 millisecond delay and have
    // it call this function again. Assign the variable to
    // the timer.
    timer = setTimeout(function() { move(amount) }, 250);  
}

function stopMove () {
    xx += 0;
    // Stop the timer
    clearTimeout(timer);
}

#box {
  background-color:blue;
  border:2px solid black;
  color:yellow;
  text-align:center;
  font-weight:bold;
  padding-top:.5em;
  margin-top:3em;
  
  /* Everything above is just for display and not actually needed.
     But in order to move the box and to be able to have a consistent
     size for it, the following is required: */
  position:absolute;
  height:50px;
  width:50px;
}

<button id="btnLeft">LEFT</button>
<button id="btnRight">RIGHT</button>
    
<div id="box"></div>