Develop Reference

How can I track mouse move events in javascript once the cursor is off of the target element?

I can get mouse motion events in javascript using a simple function:
myElement.onmousemove(function(event){
// ...
});
but I think those events only fire when the cursor is hovering over the element. I know I can also do this for document and get all mouse motion events:
document.onmousemove(function(event){...});
However, this event doesn't have the "scope" of belonging to the div or button or whatever, and won't have an offset relative to the element I'm working with.
My workaround is to save a variable pointing at the focused div and reference it when getting all motion events, but I'd much rather get motion events and the onmousemove function set for the element itself. Is there a way for that element to continue receiving mouse move events even if the cursor leaves the boundary of the element?
In case it matters I can use jQuery but I would prefer a native solution.

no, it is not possible to get a mousemove event when the movement is outside of the attached element. As you stated correctly, you can track the movement on the document. When using that together with mouseenter and mouseleave events, you can set/unset a variable to indicate if the movements are happening on the element or not.
e.g.
var myElement = document.getElementById("special");
var isOverMyElement = false;
document.addEventListener('mousemove', function(e){
if (isOverMyElement){
console.log("mouse is within myelement at details", e);
}
})
myElement.addEventListener('mousenter', function(e){
isOverMyElement = true;
})
myElement.addEventListener('mousenter', function(e){
isOverMyElement = false;
})
If you are targeting older browsers, use jQuery as it normalizes mouseenter/leave over browsers. If you are targeting modern browsers, there is no need for jQuery

Pass event to a sibling html element

I have created an app with three.js were there are 2 renderers (1 canvas and 1 div(css renderer)).
The css renderer is on top of the canvas and I would like to pass any type of event to the canvas element which is behind. So far I have failed to create a dispatcher...
What I have tried so far:
1)
// on top element css renderer
$(this.cssRenderer.domElement).on("click mousedown mouseup mousemove focus blur keydown keyup change touchstart touchend touchmove", function ( event ) {
event.preventDefault();
event.stopImmediatePropagation();
//canvas background domelement
$(that.renderer.domElement).trigger(event);
});
2)
$(this.cssRenderer.domElement).on("click mousedown mouseup mousemove focus blur keydown keyup change touchstart touchend touchmove", function ( event ) {
event.preventDefault();
event.stopImmediatePropagation();
that.renderer.domElement.dispatchEvent(event.originalEvent);
});
In case 2 I get the following error:
Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on
'EventTarget': The event is already being dispatched.
I also tried to copy the object or pass it after some timeOut but nothing seem to work.
I haven't done anything similar so I'd like a little help or some guidance.

You can't just pass event to your trigger function, as event is an object and trigger requires a string as an argument.
Instead, try passing event.type instead:
$(that.renderer.domElement).trigger(event.type);
Read up here.
JSFiddle (or with mouse coordinates)
To also pass mouse coordinates I am passing an object (mouse) as well as the event type.

Javascript prevent event propagation through element

Working with google maps which has infowindows that popup. These infowindows have images which are click-able. As a result I need to be able to propagate events in the infowindow. However I am also able to click THROUGH the infowindow to other markers which causes the current infowindow to close and it to open a new infowindow.
I dont think this issue is specific to google maps. Is there a way to stop events from propagating through an element?
Thought the below code would help but it didnt.
$(document).on('touchstart', '.infoWindow', function(e){
if ($(e.currentTarget) == $(this)) e.stopPropagation();
});

if ($(e.currentTarget) == $(this))
This is never true. It creates two distinct jQuery instances, which - even if they contain the same element - are not the same object. You might have wanted to do
if (e.currentTarget == this)
but this is always true - by definition of the event dispatch algorithm, the this value of an event listener and the currentTarget of the event object always refer to the same thing. Hell, even jQuery does this.
So you should just write
$(document).on('touchstart', '.infoWindow', function(e){
e.stopPropagation();
});
to prevent touchstart events from bubbling through your infoWindows.

You cannot stop the event propagation when you use event delegation. Event delegation relies on the bubbleing event, so by the time the delegated handler gets the event, the event already bubbled through every other element. You need to attach your event listener directly to the element.
$('.infoWindow').on('touchstart', function(e){
e.stopPropagation();
});
Event delegation works by adding the event listener to the document, then every time the document receives that touchstart event, jQuery checks the source element and all of its parent if they match the given selector. If one matches, the handler gets invoked. This is why you don't need to add the listener every time you add a new element that would match the given selector.

Setting a background color of the .infoWindow element might be a solution.
If it should be transparent, you can use as follows:
background-color: rgba(255, 0, 0, 0);

How to get the mouse position from 'drag' events in Firefox

With "draggable" domNoes, the 'drag' event doesn't seem to contain any mouse information at all (like offsetX and offsetY) like it does in chrome. How can I get this information while dragging?
I've tried setting a 'mousemove' event handler on the document, but it seems like that isn't fired when something is being dragged. Same seems to be true in chrome. What a drag..
I'm using Firefox 30.

drag events are used on the elements that are being dragged. dragover can be used on other elements that stay stationary such that something is dragged over them. If you ask for clientX or clientY on drag events, you will get zeros. If you drag that element over an element with dragover, and ask that event for coordinates, you will get x and y relative to the dragover listening element.
Easiest example to see it in action is to apply dragover to the document object, then drag something over it and print the x and y.

Update
Sorry for the delayed response, I've been very busy. If you have the mousemove event attached to the actual document rather than the element, then it should still fire. For example:
document.addEventListener("mousemove", moveHandler, true);
Notice that I set the boolean at the end to "true"; this means that the event fires in the capture phase. It should update the coordinates in your mouse move function as you're needing. As for getting the element being dragged, you can get that element reference from event.target in the drag handler, like this:
function dragHandler(e) {
var el = e.target; //this is the element being dragged
}
You can use this to ascertain the offset of the element that you're dragging:
var rectObject = element.getBoundingClientRect();
var top_offset = rectObject.top;
var left_offset = rectObject.left;
If you need mouse coordinates, you'll need to attach a mousemove event listener to the DOM and store the coordinates in a global variable so that you can access them in the drag listener.

Touch events over two dom elements?

I have two dom elements right next to one another.
During a touch event I want to be able to slide over each element. As I do, depending on what element i'm on I want different things to happen.
What would this look like?
Since the touch is down a new touchstart event doesn't fire as they slide to the new element.
Thanks!
EDIT: this is the actual code
ul
li 1
li 2
li 3
I want to carry a constant touchmove event over each item and all i really need it to be able to know the index of the current li
Right now I'm trying:
$('ul').live 'touchmove', (event) ->
element = document.elementFromPoint(event.clientX, event.clientY)
#now i need the index of this element somehow

element = document.elementFromPoint(event.pageX, event.pageY)
pageX and pageY not clientX and clientY
It's hard to look into these event objects for touch events because the mobile Safari console is so freaking primitive.

You're going to want to listen for the "touchmove" event to be triggered. Then use document.elementFromPoint(event.clientX, event.clientY) to figure out which div the finger is over.