Javascript onmousedown/onmouseup功能不工作

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

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

左
右

这是我的javascript代码（条件语句只是为了使矩形不会离开画布）：

函数moveLeft（）{
xx-=20；
如果（xx400）{
xx=400；
}
}
函数stopMove（）{
xx+=0；
}

当您按下鼠标按钮时，

mousedown

事件只会触发一次。当你按下按钮时，它不会持续开火。您需要做的是使用开始移动，然后在

鼠标上停止计时器

另外，不要使用内联HTML事件处理程序（
onmouseover
，
onmouseout
，等等）为什么

最后，由于
moveLeft
和
moveRight
函数本质上是相同的，因此它们可以组合成一个函数，只需引入一个确定方向的参数即可

下面是一个工作示例：


//获取需要与之交互的HTML元素的引用：
var btnLeft=document.getElementById（“btnLeft”）；
var btnRight=document.getElementById（“btnRight”）；
var-box=document.getElementById（“box”）；
//使用modern为JavaScript中的HTML元素设置事件处理程序
//标准，而不是HTML。左右两个按钮都需要
//调用相同的函数，但参数值不同。这是
//为什么要将事件绑定到另一个封装实际事件的函数
//调用move函数（以便可以传递参数）。
btnLeft.addEventListener（“mousedown”，function（）{move（-20）；}）；
addEventListener（“mousedown”，function（）{move（20）；}）；
btnLeft.addEventListener（“mouseup”，stopMove）；
btnRight.addEventListener（“鼠标”，停止移动）；
//需要在通话之间访问计数器才能移动
var-xx=0；
//我们将启动自动计时器，但稍后需要停止
//所以我们需要为此设置一个变量。
var定时器=null；
//只需要一个函数来处理移动操作
//这个论点决定了方向
功能移动（金额）{
//停止任何以前的计时器，这样我们就不会得到失控的效果
清除超时（计时器）；
xx+=金额；
//检查新位置，查看其是否离开可见页面
if（xx<0）{
xx=窗宽；
}else if（xx>窗口内部宽度）{
xx=0；
}
//只是显示当前值
box.textContent=xx；
//将长方体移动到新位置
box.style.left=xx+“px”；
//在250毫秒延迟后运行计时器，并
//它再次调用此函数。将变量分配给
//计时器。
计时器=设置超时（函数（）{move（amount）}，250）；
}
函数stopMove（）{
xx+=0；
//停止计时
清除超时（计时器）；
}
#框{
背景颜色：蓝色；
边框：2件纯黑；
颜色：黄色；
文本对齐：居中；
字体大小：粗体；
填料顶部：.5em；
边缘顶端：3em；
/*以上所有内容都只是为了展示，实际上并不需要。
但是为了移动盒子，并且能够有一个一致的
其尺寸要求如下：*/
位置：绝对位置；
高度：50px；
宽度：50px；
}
左
正确的
由于鼠标事件在关闭时不会触发，因此需要手动触发事件，直到检测到其他事件为止。为此，您需要使用setInterval或setTimeout


var-moveTimer，
xx=200；
功能移动（dir）{
xx+=20*dir；
如果（xx400）{
xx=400
}
stopMove（）
moveTimer=window.setTimeout（move.bind（this，dir），100）
document.getElementById（“out”）.value=xx；
}
函数stopMove（）{
if（moveTimer）window.clearTimeout（moveTimer）；
moveTimer=null
}
window.addEventListener（“mouseup”，stopMove）
左
正确的
您需要使用Interval，您可以注册全局mousemove事件侦听器。或者，您可以使用1000个lib中的一个，这些lib已经针对大多数浏览器进行了优化。例如JQueryUI。我会使用velocity来代替未针对浏览器进行优化的JQueryUI。这个项目的目的是什么？编程简介我还没有过多介绍计时器，你能帮我吗？我是否需要创建一个条件语句来执行此操作？如果您关心性能，我会添加一个选项，您希望使用requestAnimationFrame。@Amber为了清晰起见，我已使用指向支持详细信息的链接更新了答案，并在代码中添加了注释。
function moveLeft () {
    xx-=20; 
    if (xx<0) { 
        xx=0;
    }
}

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

function stopMove () {
    xx+=0;
}