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

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.

Prevent Swipe events when interacting with elements on a page

I am building an iPad application which is essentially a series of slides.
When I've finished reading a slide I am able to swipe to the next slide *(using Zepto's swipe) which changes the window.location to the next slide. (the swipe event is bound to the window.body as it needs to work on the whole page)...
Here is the problem: some slides have interactive elements such as buttons, draggable items etc. The problem is that the swipe event is triggered when using some of these interactive elements.
Does anyone know of a way to prevent swipe from triggering in these instances? Perhaps settings a sensitivity etc?
I'm stumped...
Best wishes and many thanks!!

The way Zepto manages touch events is it binds listeners to the touchstart, touchend, and touchmove events on document.body. It then performs calculations on what event to send and triggers an event on the element that received the touchstart event. This event then bubbles up through the DOM tree evoking the listeners of each element.
This gives us two ways of preventing swipe events:
First, you could do something like:
$('#my-child-element').bind('touchstart touchend touchup', function(event) {
event.stopPropagation();
});
When your child element receives one a touch event, it will prevent it from propagating to parent elements, most importantly the body tag. This prevents the Zepto touch processor from doing anything, blocking swipe, tap, singleTap, longTap, and doubleTap events from occurring while operating in that element.
Because swipe events also bubble, you could also just prevent those specific events from bubbling to your element that listens to page change swipes:
$('#my-child-element').bind('swipeLeft swipeRight', function(event) {
event.stopPropagation();
});
This will allow you to still receive the Zepto generated events inside your child element but not outside. Zepto tap events will also still work for all elements within your child.
Fiddle here: http://jsfiddle.net/bnickel/dUuUd/

Hope "excludedElements" method will help you, like below.
$(".block").swipe({
swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
},
excludedElements: ".link, a",
threshold: 0
});

touchstart and touchend events refering to the same element, while events done on different elements

I am having a problem with my Javascript code for Android tablets.
Suppose I have grid made of several div tags. with class "box";
Now I bind event handlers for all these divs in the grid.
When the touchstart (mousedown) event occurs and I move the cursor to some other div in the grid (without releasing the cursor) and then release the cursor (touchend) on this current div. When I tried to alert the id of this current div (i.e. touchend div), the alert shows the id of the div where the "touchstart" has occurred.
$(".box").bind('touchstart',function () {alert($(this).attr("id"))});
$(".box").bind('touchend',function () {alert($(this).attr("id"))});
Actually this is my first program for the Android tablet. So I need help for this.

This is expected and it would be be very confusing if it did anything else. If the element it ended up on did not have a registered listener you would never get the touchEnd event at all.
You can see where the touch went by looking at the coordinate properties of the touches and you can track it in progress with touchmove.

Don't really get your question. Are you trying to get the alert to display the div id of where you mousedown? You will need to store the id in the touchstart event in a variable and display the value when touchend has occured.

mootools mouseevent targets

whats is the difference between a "target" a "relatedTarget" and a "fromelement" in terms of a mootools mouse event?
for example in the following code why is target not being used and why is there a || involved?
'mouseenter':function(e){
var reltar = e.relatedTarget || e.fromElement;
}

Basically,
The target is the element the event is dispatching on. i.e.
$('el').addEvent('mouseenter',function(event){
console.log(event.target) //target refers to the 'el' element.
}
The relatedTarget is the element the mouse came from in case of mouseover/enter.
fromelement is the MS way to implement what relatedTarget does. Therefore,
var reltar = e.relatedTarget || e.fromElement;
is a cross-browser way to detect what element the mouse came from.

W3C says that event.relatedTarget is the element where mouse comes from in a mouseover event, or the element that the mouse goes to in a mouseout event.
However, IE uses two separate properties for those two cases: event.fromElement is the element the mouse comes from in a mouseover event, while event.toElement is the element the mouse goes to in a mouseout event.
You can find more details and some examples on the following page by Peter-Paul Koch (very good content there):
http://www.quirksmode.org/js/events_mouse.html