jquery捕获鼠标移动
想在网页上画东西,现在问题是移动太快的话线会断。
$(document).ready(function () {
$(document).on("mousedown", function (event) {
$(document).on("mousemove",
function (event) {
var left = event.clientX;
var top = event.clientY;
$("body").append("<div style='width:10px;height:10px;background:#000;position:absolute;left:" + left + "px;top:" + top + "px;'></div>");
return false;
});
/*
window.captureEvent(Event.MOUSEMOVE);
if (document.all) {
document.setCapture();
}
*/
return false;
});
$(document).on("mouseup", function () { $(document).off("mousemove"); });
[解决办法]
每次mousemove一个点,这种方式移动快了当然就断了,因为mousemove事件也是有间隔的
你应该把逻辑进行分解
1.写一个画线的函数,可以在两点之间画出一条直线(大致算法是按距离确定点数,然后循环画点,要以较长的那个距离为标准,例如(1,1),(2,4)这两点就应该苗3个点);
2.mousemove事件中把上一个点和当前点作为参数调用画线函数