onmousedown/onmouseup功能不工作

Question

我有一个矩形，我试图使用javascript移动。我可以让它左右移动使用函数，但当我按住鼠标，它就不会继续移动。以下是我的html代码：

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

下面是我的javascript代码(条件语句就是这样矩形就不会离开画布)：

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事件只会触发一次。当你按下按钮时，它不会连续开火。您需要做的是使用计时开始移动，然后在mouseup上停止计时器。

另外，不要使用内联的HTML处理程序(onmouseover、onmouseout等)。下面是为什么。

最后，由于您的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>

​

Answer 2

由于鼠标evet在关闭时不会触发，所以需要手动触发事件，直到检测到其他事件为止。要做到这一点，您需要使用setInterval或setTimeout

​

var moveTimer,
    xx = 200;

function move (dir) {
    xx+=20*dir; 
    if (xx<0) { 
        xx=0;
    } else if (xx>400) {
       xx=400
    }
    stopMove()
    moveTimer = window.setTimeout(move.bind(this,dir), 100)
    document.getElementById("out").value = xx;
}

function stopMove () {
    if(moveTimer) window.clearTimeout(moveTimer);
    moveTimer = null
}

window.addEventListener("mouseup", stopMove)

<button onmousedown="move(-1);">LEFT</button>
<button onmousedown="move(1);">RIGHT</button>

<input type="number" id="out"/>

​