Changing the Cursor with Events when dragging an HTML5 canvas

Georg Tremmel — Tue, 25 Jan 2011 09:50:01 +0000

With jQuery document ready:

$(function(){
	var canvas = $('#testCanvas')[0];
	canvas.addEventListener('mousedown', function(e){
		e.preventDefault();
		e.stopPropagation();
		e.target.style.cursor = 'move';
	}, false);
	canvas.addEventListener('mouseup', function(e){
		e.target.style.cursor = 'default';
	}, false);
});

And without…

$('#testCanvas')[0].addEventListener('mousedown', function(e){
	e.preventDefault();
	e.stopPropagation();
	e.target.style.cursor = 'move';
}, false);
 
$('#testCanvas')[0].addEventListener('mouseup', function(e) {
	e.target.style.cursor = 'default';
}, false);

Based on this: http://stackoverflow.com/questions/2659999/html5-canvas-hand-cursor-problems

Simulating Keyboard & Mouse Events. And Key-Modifier Events

Georg Tremmel — Tue, 01 Dec 2009 09:21:56 +0000

Creating and Posting a Keyboard Event:

CGEventRef sDown, sUp;
sDown = CGEventCreateKeyboardEvent (
			NULL,
			(CGKeyCode)1,
			true</strong>
);
="red">CGEventSetFlags(sDown, kCGEventFlagMaskShift);</strong>  
 
// setting flags with special function. 
// Setting it via CGCreateKeyboardEvent
// would work only for the first time it's run
 
CGEventPost(kCGHIDEventTap, sDown);
 
sUp = CGEventCreateKeyboardEvent (
			NULL,
			(CGKeyCode)1,
			false</strong>
);
CGEventPost(kCGHIDEventTap, sUp);
 
CFRelease(sDown);
CFRelease(sUp);

That leaves the door open for applying the same to mouse events:

CGEventRef mouseEvent; mouseEvent = CGEventCreateMouseEvent ( NULL, kCGEventMouseMoved, CGPointMake(100, 100), kCGMouseButtonLeft ); CGEventPost(kCGHIDEventTap, mouseEvent );

Magical. Isn’t it.

Of course, in pre-10.6 days it would have looked like that:

CGPostKeyboardEvent (0,5,true); CGPostKeyboardEvent (0,5,false);

Codec » Cursor

Changing the Cursor with Events when dragging an HTML5 canvas

Simulating Keyboard & Mouse Events. And Key-Modifier Events