How to detect touch move out of a node with javascript.

Question

I am building an android app with phonegap. I am trying to implement a touch move event when user touches as element. But I am still not been able to make it perfect.

Touch move event works perfect but when I touches that area and drag my finger to another touch area no event is firing.

so in gist :- User touches one element in the page; then move finger out of the scope of the element. I want to catch the event when the finger is moved out of the element. And when it enters another touch area the touch move function should fire again.

Thanks

Answer 1

Maybe you should had added a javascript tag to your question for getting more attention for it.

As far as I know no browser supports an event like "mouseout" or "mouseover" for touch events.

So we have to keep track of that ourselves. Since the touch object we get (when a touch event is fired) only provides the target the touch event started on, we have to check which element we're touching by using the touch position.

I used document.elementPosition(x, y) for that.

So with the coordinates of the the touch event we can get the element we're touching.

To recognize leaving an element, I'm storing the last touched element and checking on new touch events, if I'm still touching the same one. If this isn't the case, we're left the old one and can deal with that.

I wrote a short demo (jsbin). You can try it here on your phone.

Source code can be also found here.

What's missing in this demo is a handling for touch events outside of the expected touch area.

I'm wondering if there is a better way to handle your task. If so, hopefully someone will write it down here. Maybe you have found an answer for your question since you added it here?