日期:2014-05-16  浏览次数:20333 次

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事件中把上一个点和当前点作为参数调用画线函数