Event-Handler für Canvas-Maus tritt auf, während geklickt wird

Question

Ich möchte wissen, wie Sie einen JQuery-Ereignis-Listener für ein HTML 5-Canvas-Element implementieren, wo ein Mauszeiger in die Zeichenfläche eindringt.

Answer 1

Behalten Sie ein Flag, wenn mousedown und mouseup, dann überprüfen Sie dies, wenn Benutzer auf der Leinwand schweben.

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

Sie können mousedown- \ mouseup Ereignisse document und MouseEnter- Ereignis auf Leinwand binden.

Ich würde vorschlagen, Capturing-Phase stattdessen zu verwenden (die jQuery nicht unterstützt), um zu vermeiden, dass jede Weitergabe Ereignis in irgendeiner Weise gestoppt wird.

ein Beispiel Siehe:

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>