Question

我想知道如何为HTML 5 canvas元素实现一个JQuery事件监听器，鼠标光标在点击时会进入画布。

Answer 1

在mousedown和mouseup时保留一个标记，然后在用户将鼠标悬停在画布上时检查此标记。

var mouseDown = false;
$(document).mousedown(function() {
  mouseDown = true;
});

$(document).mouseup(function() {
  mouseDown = false;
});

var canvasHover = false;
$('canvas').on('mouseenter', function() {
  $('span').html(mouseDown ? 'true' : 'false');
});

canvas {
  background:yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="300" height="300"></canvas>
<hr />
mouse is down: <span></span>

Answer 2

您可以将mousedown \ mouseup事件绑定到画布上的document和mouseenter事件。

我建议使用捕获阶段（jQuery不支持）以避免以某种方式停止任何传播事件。

查看示例：

 document.addEventListener('mousedown', function(e) {
   $(this).data('mouseHold', e.which);
 }, true);
 document.addEventListener('mouseup', function(e) {
   $(this).data('mouseHold', false);
 }, true);
 $('canvas').on('mouseenter', function() {
   if ($(document).data('mouseHold')) {
     console.log('holding mouse button ' + $(document).data('mouseHold'));
   }
 });

canvas {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas></canvas>

单击时，画布鼠标的事件处理程序进入

2 个答案: