693Changing the Cursor with Events when dragging an HTML5 canvas

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

289Simulating Keyboard & Mouse Events. And Key-Modifier Events

Creating and Posting a Keyboard Event:

CGEventRef sDown, sUp;
sDown = CGEventCreateKeyboardEvent (
            NULL,
            (CGKeyCode)1,
            true
);
CGEventSetFlags(sDown, kCGEventFlagMaskShift);  

// 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
);
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);