Javascript 移除鼠标移动

我正在开发一个应用程序来帮助自闭症儿童准备学习写作。这很直截了当。他们只需要画一条直线。我的工作原理与“连接点”非常相似，它们从绿灯开始，进入黄色，然后进入红色。然而，在我使用鼠标的网页上，一切都很好，因为“点”是用鼠标盖“触摸”的，如下所示：

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>


<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jplayer.min.js" type="text/javascript"></script>
<script type="text/javascript">


    $(function() {
        var dots = [13, 15, 13, 25, 13, 55, -1, -1,
                    45, 15, 45, 40, -1, -1,
                    70, 15, 70, 40, -1, -1, 
                    80, 15, 80, 40, 80, 60, -1, -1];

        function contains(arr, value) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == value) {
                    return true;
                }
            }
            return false;
        }
        function getRandomPoints(totalPoints) {
            var indexes = new Array();
            for (var i = 0; i < totalPoints; i++) {
                var done = false;
                while (!done) {
                    var index = Math.floor(Math.random() * dots.length);
                    if (index % 2 != 0) {
                        index++;
                        if (index > dots.length) {
                            continue;
                        }
                    }

                    if (!contains(indexes, index)) {
                        indexes.push(index);
                        done = true;
                    }
                }
            }

            return indexes.sort(function(a, b) {
                return a - b;
            });
        }
        function displayGrid(ctx) {
            var gridSize = 20, width = 900;
            for (var ypos = 0; ypos < width; ypos += gridSize) {
                ctx.moveTo(0, ypos);
                ctx.lineTo(width, ypos);
            }
            for (var xpos = 0; xpos < width; xpos += gridSize) {
                ctx.moveTo(xpos, 0);
                ctx.lineTo(xpos, width);
            }

            ctx.strokeStyle = "#eee";
            ctx.lineWidth = .7;
            ctx.stroke();
        }
        function addPoint(index, x1, y1) {
            for (var i = 0; i < points.length; i++) {
                var x2 = points[i].x, y2 = points[i].y;
                var d1 = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
                var d2 = radius * 2 + 2;
                if (d2 > d1) {
                    return false;
                }
            }

            points.push({ 'x': x1, 'y': y1, 'index': index });
            return true;
        }

        //Initialization....
        var $graph = $('#graph'), gpos = $graph.position();
        var $timer = $('#timer');
        var points = new Array();
        var ctx = $graph.get(0).getContext("2d");

        //Parameters...
        var indexes = getRandomPoints(7), ratio = 3, hops = 0, point = 0, maxTotalHops = 60, radius = 12;
        var lineWidth = 11.5;
        var xDisplacement = 0, yDisplacement = 0;
        var borderColor = 'rgb(0,102,204)';



        //Display the character's fixed lines...
        ctx.beginPath();
        ctx.translate(xDisplacement, yDisplacement);
        ctx.lineWidth = lineWidth;

        for (var i = 0; i < dots.length; i += 2) {
            var newLine = dots[i] == -1;
            if (newLine) {
                i += 2;
            }

            var x = ratio * dots[i], y = ratio * dots[i + 1];
            if (hops == 0 && contains(indexes, i)) {
                hops++;
                ctx.moveTo(x, y);
                continue;
            }

            if (newLine || i == 0) {
                ctx.moveTo(x, y);
            }
            else {
                if (hops == 0) {
                    ctx.lineTo(x, y);
                }
                else {
                    ctx.strokeStyle = borderColor;
                    ctx.stroke();
                    ctx.beginPath();

                    if (addPoint(i, x, y)) {
                        var cx = gpos.left + xDisplacement - radius + 1 + x;
                        var cy = gpos.top + yDisplacement - radius + 1 + y;
                        $('<span></span>')
                            .addClass('circle')
                            .html(++point)
                            .data('pos', { 'x': cx, 'y': cy })
                            .css({ 'top': 0, 'left': 0 })
                            .insertAfter($graph);
                    }
                }
            }

            if (hops > maxTotalHops) {
                hops = 0;
            }
            else if (hops > 0) {
                hops++;
            }
        }

        ctx.strokeStyle = borderColor;
        ctx.stroke();




        //Create and initialize hotspots...
        var passed = 0;
        $('.circle').each(function() {
            var pos = $(this).data('pos');
            $(this).animate({
                left: pos.x,
                top: pos.y
            }, 700);
        }).mousemove(function() {  // <====================== this part
            var index = parseInt($(this).text());
            if (passed != index - 1) {
                return;
            }

            $(this).css({
                'color': '#c00',
                'font-weight': 'bold'
            }).animate({
                left: 0,
                top: 0,
                opacity: 0
            }, 1000);

            ctx.beginPath();

            var start, end, done = passed + 1 == points.length;
            if (done) /*The entire hotspots are detected...*/{
                start = 0;
                end = dots.length - 2;
                clearInterval(tid);

                $timer.html('Well done, it took ' + $timer.html() + ' seconds!').animate({
                    left: gpos.left + $graph.width() - $timer.width() - 20
                }, 1000);
            }
            else {
                start = passed == 0 ? points[passed].index - 4 : points[passed - 1].index;
                end = points[passed].index;
            }

            for (var i = start; i <= end; i += 2) {
                var newLine = dots[i] == -1;
                if (newLine) {
                    i += 2;
                }

                var x = ratio * dots[i], y = ratio * dots[i + 1];
                if (newLine || i == start) {
                    ctx.moveTo(x, y);
                }
                else {
                    ctx.lineTo(x, y);
                }
            }

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = borderColor;
            ctx.stroke();

            if (done) {
                $('.filled').css({
                    left: gpos.left + xDisplacement + 10,
                    top: gpos.top + yDisplacement + 150
                }).fadeIn('slow');
            }

            passed++;
        });

        //Initialize timer...
        $timer.css({
            top: gpos.top + 10,
            left: gpos.left + 10
        });
        var timer = 0, tid = setInterval(function() {
            timer += 30 / 1000;
            $timer.html(timer.toFixed(2));
        }, 30);
    });



</script>

<style type="text/css">
    .circle {
        background: url('start.png');
        width: 24px;
        height: 24px;
        text-align: center;
        font-size: .8em;
        line-height: 24px;
        display: block;
        position: absolute;
        cursor: pointer;
        color: #333;
        z-index: 100;
    }
    .filled {
        background: url('train.gif');
        position: absolute;
        width: 172px;
        height: 251px;
        display: none;
    }
    #timer {
        position: absolute;
        font-family: Arial;
        font-weight: bold;
        font-size: 1em;
        background: #c00;
        color: #fff;
        padding: 5px;
        text-align: center;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        font-variant: small-caps;
    }
    #graph {
        background: url('vlinesbackground.jpg');
        left: 5px;
        top: 20px;
        position: relative;
        border: 1px dotted #ddd;
    }

</style>

$（函数（）{
变量点=[13,15,13,25,13,55，-1，-1，
45, 15, 45, 40, -1, -1,
70, 15, 70, 40, -1, -1, 
80, 15, 80, 40, 80, 60, -1, -1];
函数包含（arr、值）{
对于（变量i=0；i点长度）{
继续；
}
}
如果（！包含（索引，索引））{
索引。推送（索引）；
完成=正确；
}
}
}
返回索引.sort（函数（a，b）{
返回a-b；
});
}
功能显示网格（ctx）{
变量gridSize=20，宽度=900；
对于（变量ypos=0；yposd1）{
返回false；
}
}
push（{x'：x1，'y'：y1，'index'：index}）；
返回true；
}
//初始化。。。。
var$graph=$（'#graph'），gpos=$graph.position（）；
var$timer=$（“#timer”）；
var points=新数组（）；
var ctx=$graph.get（0.getContext（“2d”）；
//参数。。。
var indexes=getRandomPoints（7），比率=3，跳数=0，点=0，最大总跳数=60，半径=12；
var线宽=11.5；
变量xDisplacement=0，yDisplacement=0；
var borderColor='rgb（0102204）'；
//显示角色的固定行。。。
ctx.beginPath（）；
ctx.translate（xDisplacement，yDisplacement）；
ctx.lineWidth=线宽；
对于（变量i=0；i最大总跳数）{
跳数=0；
}
否则如果（跃点>0）{
啤酒花++；
}
}
ctx.strokeStyle=边框颜色；
ctx.stroke（）；
//创建和初始化热点。。。
var=0；
$（'.circle'）。每个（函数（）{
var pos=$（this）.data（'pos'）；
$（此）。设置动画({
左：位置x，
顶部：位置y
}, 700);
}).mousemove（function（）{//你能做一个mousedrag而不是mouseover吗？同样的结果。mousedrag给了我一个错误消息。你能做一个mousedrag而不是mouseover吗？同样的结果。mousedrag给了我一个错误消息。