<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标轨迹</title>
<style>
body{
background:black;
}
</style></head>
<body>
<canvas width="800" height="600" style="background:white;">
不支持canvas
</canvas>
</body>
<script>
window.onload =function(){
var canv = document.querySelector('canvas');
if(false !==canv.getContent){
var canvas = canv.getContext('2d');
canv.addEventListener('mousedown',function(ev){
var ev = ev || window.event;
canvas.beginPath();
canvas.moveTo(ev.clientX-canv.offsetLeft,ev.clientY-canv.offsetTop);
canv.addEventListener('mousemove',function(ev){
var ev = ev || window.event;
canvas.lineTo(ev.clientX-canv.offsetLeft,ev.clientY-canv.offsetTop);
canvas.stroke();
canv.addEventListener('mouseup',function(){
canvas.closePath();
canv.removeEventListener('mousemove',function(){
},false);
},false);
},false);
},false);
}
};</script>
</html>
鼠标轨迹运行,可是onmouseup无法让轨迹停止
window.onload =function(){
var canv = document.querySelector('canvas');
if(false !==canv.getContent){
var canvas = canv.getContext('2d');
canv.onmousedown = function(ev){
var ev = ev || window.event;
canvas.beginPath();
canvas.moveTo(ev.clientX-canv.offsetLeft,ev.clientY-canv.offsetTop);
canv.onmousemove = function(ev){
var ev = ev || window.event;
canvas.lineTo(ev.clientX-canv.offsetLeft,ev.clientY-canv.offsetTop);
canvas.stroke();
};
canv.onmouseup = function(){
canv.onmousemove = null;
canvas.closePath();
//canv.onmousedown = null;
};
};
}
};传统事件绑定正常.,怎么修改代码使得现代的事件绑定也可以正常运行呢
//经过提醒修复一部分后
经过修改之后好了.其实我这个嵌套是为了说明先后顺序.而且,取消完路径还是要嵌套的.我暂时修改成这样了.
var canvas = canv.getContext('2d');
canv.addEventListener('mousedown',function(ev){
var ev = ev || window.event;
canvas.beginPath();
canvas.moveTo(ev.clientX-canv.offsetLeft,ev.clientY-canv.offsetTop);
},false);
canv.addEventListener('mousemove',paint,false);
canv.addEventListener('mouseup',function(){
canvas.closePath();
canv.removeEventListener('mousemove',paint,false);
},false);
function paint(ev){
var ev = ev || window.event;
canvas.lineTo(ev.clientX-canv.offsetLeft,ev.clientY-canv.offsetTop);
canvas.stroke();
}目前依旧存在问题,取消mousemove的事件监听后,不知道在何处恢复mousemove的事件监听
onmousedown和addEventListener一个重要的区别在于：
前者只能绑定一个事件处理函数，后者可以是多个（处理函数队列）
也就是说：
canv.onmousedown = function() {console.log('handler1');};
canv.onmousedown = function() {console.log('handler2');};
//这里handler2会覆盖handler1而，这里不会：
canv.addEventListener('mousedown', function() {console.log('handler1');});
canv.addEventListener('mousedown', function() {console.log('handler2');});回到你的代码，不要把mousedown, mousemove, mouseup嵌套写，你会把相同的处理函数反复绑定