HTML5 Canvas中mouseup事件未触发问题排查求助

嘿，我一眼就看到你代码里的问题了！你的mouseup事件明明能触发，但执行到一半就报错了，所以看起来像是没触发一样。

具体来说，在mouseup的回调函数里，你直接写了logger.log("up " + mousePos.x + "," + mousePos.y);，但这个mousePos变量在这个函数的作用域里根本没定义啊！浏览器执行到这里会直接抛出ReferenceError，导致日志代码根本跑不起来。

另外还有个小细节：你的getMousePos函数里计算了缩放后的x和y，但最后return的却是未缩放的坐标（直接返回了mouseEvent.clientX - rect.left这类值），这个虽然不影响事件触发，但会导致你拿到的坐标不是canvas内部的真实坐标，我也一起帮你修正了。

修复后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body {background: #eee;} 
</style> 
</head> 
<body> 
<div style="float:left;"> 
<canvas id="video-canvas" width=320 height=240 style="background:#000;"></canvas> 
</div> 
<pre align="left" id="log"></pre> 
<script> 
function Logger(id) {this.el = document.getElementById('log');} 
Logger.prototype.log = function(msg) { 
  var fragment = document.createDocumentFragment(); 
  fragment.appendChild(document.createTextNode(msg)); 
  fragment.appendChild(document.createElement('br')); 
  this.el.appendChild(fragment); 
}; 
Logger.prototype.clear = function() {this.el.textContent = '';}; 
var logger = new Logger('log'); 
</script> 
<script type="text/javascript"> 
var logelem = document.getElementById("log"); 
var canvas = document.getElementById('video-canvas'); 
function getMousePos(canvasDom, mouseEvent) { 
  var rect = canvasDom.getBoundingClientRect(); 
  var scaleX = canvas.width / rect.width; 
  var scaleY = canvas.height / rect.height; 
  // 返回适配canvas分辨率的坐标
  var x = (mouseEvent.clientX - rect.left)*scaleX; 
  var y = (mouseEvent.clientY - rect.top)*scaleY; 
  return { x: x, y: y }; 
} 
canvas.addEventListener("mousedown", function (e) { 
  var mousePos = getMousePos(canvas, e); 
  logger.log("down " + mousePos.x + "," + mousePos.y); 
}, false); 
canvas.addEventListener("mouseup", function (e) { 
  // 先获取鼠标位置变量，再使用
  var mousePos = getMousePos(canvas, e); 
  logger.log("up " + mousePos.x + "," + mousePos.y); 
}, false); 
canvas.addEventListener("mousemove", function (e) { 
  var mousePos = getMousePos(canvas, e); 
  logger.log("move " + mousePos.x + "," + mousePos.y); 
}, false); 
</script> 
</body> 
</html>

额外提醒 #

如果之后你还遇到mouseup不触发的情况，要考虑一种常见场景：当你按住鼠标拖动，把鼠标移出canvas区域后再松开，这时mouseup事件会触发在document上，而不是canvas本身。这种情况下，你可以把mouseup事件绑定到document对象上，确保无论鼠标在哪里松开都能捕获到事件。

内容的提问来源于stack exchange，提问作者lucky1928