キャンバスマウスのイベントハンドラがクリックされている間に入力される

Question

クリックしている間にマウスカーソルがキャンバスに入るHTML 5キャンバス要素の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

あなたはキャンバス上documentへのmousedown \のmouseupイベントおよび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>