今天去爬蟲(chóng)爬一個(gè)需要滑塊驗(yàn)證碼的網(wǎng)站的時(shí)候，發(fā)現(xiàn)滑動(dòng)滑塊的距離酱讶，需要模擬手動(dòng)，所以想收集幾組手動(dòng)的軌跡作為比對(duì)彼乌。
然后網(wǎng)上搜了很多辦法泻肯，幾乎沒(méi)有找到相關(guān)的代碼，找到的要么是直接拖拽囤攀，不顯示信息的软免；要么是直接記錄軌跡，而不能夠以鼠標(biāo)按下和鼠標(biāo)抬起之間的滑動(dòng)距離作為依據(jù)的焚挠，所以融合了好幾篇教程，修改了一下代碼漓骚，基本上完成了需求蝌衔。
遇到的問(wèn)題
-
removeEventListener失效
在改代碼途中還遇到了一個(gè)問(wèn)題：.removeEventListener("mousemove", function(){console.log(...)});這個(gè)removeEventListener不起作用榛泛，根本不會(huì)運(yùn)行。百度了很多知識(shí)發(fā)現(xiàn)是后面的function的問(wèn)題噩斟。
網(wǎng)上搜索之后了解到曹锨，不起作用的原因是removeEventListener后面的function和addEventListener里面的function不一樣，所以導(dǎo)致不能起作用剃允。最后把a(bǔ)ddEventListener的function封裝成了一個(gè)函數(shù)(myfunction)沛简，然后直接使用函數(shù)名就可以了:
.removeEventListener("mousemove", myfunction);
.addEventListener('mousemove', myfunction);
- canvas連續(xù)畫(huà)線不能斷開(kāi)兩次畫(huà)線
查過(guò)了資料，發(fā)現(xiàn)判斷一下兩次畫(huà)線中間的情況斥废，在第二次畫(huà)線的開(kāi)頭椒楣，應(yīng)該使用context.moveTo(e.x,e.y);而不是context.lineTo(e.x,e.y);
記錄鼠標(biāo)軌跡代碼如下：
<!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='在綠色的方塊中滑動(dòng)鼠標(biāo)';
});
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">在綠色的方塊中滑動(dòng)鼠標(biāo)</div>
<button>重置</button>
<div>
<div id="logs"></div>
<div class="track-coordinate-list"></div>
</div>
</div>
</body>
</html>
- 每次點(diǎn)擊都會(huì)以第一個(gè)點(diǎn)作為 0,0 點(diǎn)開(kāi)始計(jì)算后面的距離
運(yùn)行效果圖：
運(yùn)行效果圖
