Google Chrome 中的 MouseUp 和 MouseDown 事件

Question

我有一个简单的 html5/canvas 和 js-setup：

HTML

<canvas id="canvas" width="500" height="500" ></canvas>

JS

var canvas = $("#canvas"),
    c = canvas[0].getContext("2d");

c.fillStyle = "gray";
c.fillRect(0, 0, 500, 500);

$(document).mousedown(function() {
    console.log('down');
});
$(document).mouseup(function() {
    console.log('up');
});

让我感到困惑的是，我能够像这样使用google chrome 记录事件

down
up
down
up
down 
down 
down 
down
up
down
down
down

意思是，我得到了连续的向下事件。我认为这是由 canvas 元素引起的，因为没有它我无法重现这种行为。

这是一个小提琴：http://jsfiddle.net/SunnyRed/zcmaT/

更新

我认为只有在用户单击并拖动时才会发生这种情况，在我的场景中可能就是这种情况。这是一个简单的点击demo。我无法在 Firefox 和 Opera 中重现它。

Answer 1

我可以在您的演示中复制这一点的唯一方法是：

• 在页面外部（在另一个来自 JS fiddle 的 iframe 中）开始单击，然后将鼠标悬停在画布上。或者
• 在画布上开始单击，然后将其释放到页面边界之外（例如在页面填充上）。

我相信这是正确的行为。