html mousemove outside panel event capture
I'm using the html examples from the SDK for the interface to my plugin. So far everything is great, I'm becoming quite the html 5 fan. But there is one issue that is really bugging that I can't seem to find a means to get around, not politely at any rate.
I have a parameter that moves in X and Y. When I select and drag it things move in X and Y, yahoo! Until I drag outside the panel and I stop getting the mousemove events. The mouseup event still works, but not the mousemove. I appreciate this is a known issue in html for many, but I was hoping someone else might have come up on this and remedied it.
I have considered sending a mouseleave event and then hijacking the event loop and using system calls to get the mouse position, but that is flaky and well let's be honest, rude. So has anyone come up with some more elegant?
As ever, any help/advice is very much appreciated.
Thanks
R
My code :
function my_mouse_down_event( event , param)
{
mouse_event_target = param;
mouse_event_last_pos_x = window.event.x;
mouse_event_last_pos_y = window.event.y;
//Set up the listeners for the Mouse Up and Mouse Move Events common to all
document.addEventListener('mousemove', function(e){ my_mouse_up_event( event ); });
document.addEventListener('mouseup', function(e){ my_mouse_up_event( event ); });
}
function my_mouse_up_event( event )
{
mouse_event_target = 'none';
//Note! The mouse position in the event is correct, negative values for outside the pane as expected
//Remove the the listeners for the Mouse Up and Mouse Move Events common to all
document.removeEventListener('mousemove', function(e){ my_mouse_move_event( event ); });
document.removeEventListener('mouseup', function(e){ my_mouse_up_event( event ); });
}
function my_mouse_move_event( event , param)
{
//Events here only received while the cursor is over my panel.
if(mouse_event_target == 'none')
{
return;
}
var xChange = window.event.x - mouse_event_last_pos_x;
//Get y up as positive
var yChange = mouse_event_last_pos_y - window.event.y;
var paramData = X and Y change in mouse movement
my_param_changed(paramData);
}
$("#xy_move").mousedown( function( event ) { my_mouse_down_event( event , "xy_move"); });