JS实现记录鼠标拖拽轨迹

今天去爬虫爬一个需要滑块验证码的网站的时候,发现滑动滑块的距离,需要模拟手动,所以想收集几组手动的轨迹作为比对。
然后网上搜了很多办法,几乎没有找到相关的代码,找到的要么是直接拖拽,不显示信息的;要么是直接记录轨迹,而不能够以鼠标按下和鼠标抬起之间的滑动距离作为依据的,所以融合了好几篇教程,修改了一下代码,基本上完成了需求。

遇到的问题

  • removeEventListener失效
    在改代码途中还遇到了一个问题:.removeEventListener("mousemove", function(){console.log(...)});这个removeEventListener不起作用,根本不会运行。百度了很多知识发现是后面的function的问题。
    网上搜索之后了解到,不起作用的原因是removeEventListener后面的functionaddEventListener里面的function不一样,所以导致不能起作用。最后把addEventListener的function封装成了一个函数(myfunction),然后直接使用函数名就可以了:
.removeEventListener("mousemove", myfunction);
.addEventListener('mousemove', myfunction);
  • canvas连续画线不能断开两次画线
    查过了资料,发现判断一下两次画线中间的情况,在第二次画线的开头,应该使用context.moveTo(e.x,e.y);而不是context.lineTo(e.x,e.y);

记录鼠标轨迹代码如下:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>log_tracks</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        *{ 
            margin:0;
            padding:0;
            border:0;
        }
        .track-monitor{
         
            background-color:orange;
        }
        .track-pad{
         
            height:200px;
            background-color:green;
        }
        .track-coordinate{
             
            background-color:purple;
            color:white;
            height:25px;
            line-height:25px;
            font-size:12px;
        }
        .track-coordinate-list{
            font-size:12px;
            width:100%;
            word-break:break-word;
        }
    </style>
    <script>
        window.addEventListener('load',function(){
            var pad = document.getElementsByClassName('track-pad')[0];
            var monitor = document.getElementsByClassName('track-monitor')[0];
            var coordinate = document.getElementsByClassName('track-coordinate')[0];
            var clist = document.getElementsByClassName('track-coordinate-list')[0];
            var reset = document.getElementsByTagName('button')[0];
            var context = monitor.getContext('2d');
            var cset = [];
            var startx = 0, starty = 0;
            $('div').mousedown(mouseState).mouseup(mouseState);
            function fixSize(){monitor.width = window.innerWidth;};
            function log(e){
                if(cset.length == 0){
                    context.moveTo(e.x,e.y);
                }else{
                    context.strokeStyle = 'white';
                    context.lineTo(e.x,e.y);
                    context.stroke();
                }
                if(e.x-startx == e.x && e.y-starty == e.y){
                    startx = e.x;
                    starty = e.y;
                }
                coordinate.innerHTML = '(' + (e.x-startx)+', '+(e.y-starty) + ')';
                cset.push(coordinate.innerHTML);
                clist.innerHTML = cset.join(', ');
            }
            function mouseState(e) {
                if (e.type == "mouseup") {
                    $('#logs').append('<br/>'+cset.join(', '));
                    clist.innerHTML = cset.join('');
                    cset = [];
                    pad.removeEventListener("mousemove", log);
                }
                if (e.type == "mousedown") {
                    startx = 0; starty = 0;
                    pad.addEventListener('mousemove',log);
                }
            }
             
            reset.addEventListener('click',function(){
                fixSize();
                cset = [];
                clist.innerHTML = '';
                coordinate.innerHTML='在绿色的方块中滑动鼠标';
            });
             
            fixSize();
        });
    </script>
</head>
<body>
    <div class="stage">
        <div class="track-pad"></div>
        <canvas width="100" height="200" class="track-monitor"></canvas>
        <div class="track-coordinate">在绿色的方块中滑动鼠标</div>
        <button>重置</button>
        <div>
            <div id="logs"></div> 
            <div class="track-coordinate-list"></div>
        </div>
    </div>
</body>
</html>
  • 每次点击都会以第一个点作为 0,0 点开始计算后面的距离

运行效果图:


运行效果图

推荐阅读更多精彩内容