Question

function down(event){
    event.target.style.backgroundColor="green";
    document.addEventListener("mousemove",move,false);
}

function up(event) {
    event.target.style.backgroundColor="red";
    document.removeEventListener("mousemove",move,false);
}

function move(event) {
    event.target.style.left=Math.max(0,Math.min(window.innerWidth-50,event.clientX-25))+"px";
    event.target.style.top=Math.max(0,Math.min(window.innerHeight-50,event.clientY-25))+"px";
}

完整代码at-＆gt; http://jsfiddle.net/tcubsfbg/1/
每当我更快地移动鼠标时，盒子就不会像我移动鼠标一样快速重新绘制新位置。

我将鼠标移动事件添加到窗口，即使使用文档，仍然会遇到同样的问题

Answer 1

修正了它。问题是你如何附加eventlisteners。

var box=document.getElementById("hello");
function init(){
    box.addEventListener("mousedown",down,false);
    box.addEventListener("mouseup",up,false);
}
function down(event){
    document.addEventListener("mousemove",move,false);
}
function move(event){
    box.style.left=event.clientX-50+"px";
    box.style.top=event.clientY-50+"px";
}
function up(event){
    event.target.style.backgroundColor="red";
    document.removeEventListener("mousemove",move,false);
}
window.onload=init();

http://jsfiddle.net/tcubsfbg/

快速移动鼠标，框不重新绘制〜只有JavaScript

1 个答案: