TouchLeave for DOM element

I want a div element on my page which increases a number on the page while it is pressed. This is fairly easy, but I want this to work on IPad and Android devices as well.

I am using the touchstart event using jQuery bind on the div. Using a setInterval I update the number (I could use calling a setTimeout every time the number is increased, but that is irrelevant). I want the interval cleared when the finger 开发者_如何学编程(touch) moves outside the div. Unfortunately touchend is not called until the finger is released from the screen. Mobile safari or webkit do not seem to support touchleave.

So here my question: Any ideas on how to mimic touchleave?

---

Based on above answer, here's what I do.

var $this = $('elementselector');
var fnmove = function (e) {
e.preventDefault();
e = e.originalEvent;
var touch = e.touches[0] || e.changedTouches[0];
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) {
        $this.trigger(touch_leave_event);
        $this.unbind(touch_move_event, fnmove);
    };
};
$this.bind(touch_move_event, fnmove);

-- inbounds function

function _isInBounds(touch, elemposition, width, height) {
    var left = elemposition.left,
        right = left + width,
        top = elemposition.top,
        bottom = top + height,
        touchX = touch.pageX,
        touchY = touch.pageY;

    return (touchX > left && touchX < right && touchY > top && touchY < bottom);
};

---

EDIT (thanks to Guillaume to completing this):

var $this = $('elementselector');
var fnmove = function (e) {
e.preventDefault();
e = e.originalEvent;
var touch = e.touches[0] || e.changedTouches[0];
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) {
        $this.trigger(touch_leave_event);
        $this.unbind(touch_move_event, fnmove);
    };
};
$this.bind(touch_move_event, fnmove);

function _isInBounds(touch, elemposition, width, height) {
    var left = elemposition.left,
        right = left + width,
        top = elemposition.top,
        bottom = top + height,
        touchX = touch.pageX,
        touchY = touch.pageY;

    return (touchX > left && touchX < right && touchY > top && touchY < bottom);
};

Sorry for the short answer, I'm leaving work. I'll come back to fill in the blanks. But you should get the idea.

---

The best method I've found is to check the position of the touchpoint inside your touchmove handler. When a touchpoint is created (on touchstart), it is added to an array called "touches". These touchpoints can be accessed by index (order in which the touchpoints were added). Then you can access the x and y coordinates from this point to determine whether or not it's still within the bounds of the element you're observing. Let's say I have a div called "myDiv" and I want to detect when the user's finger is dragged out of it from within.

var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('touchmove', function(event){
    var currentElement = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
    if (currentElement.id !== 'myDiv'){
        console.log('finger has moved outside of element');
    }
}, false);

So when we move our finger, we capture over which element it currently is with the document.elementFromPoint() function, passing in the x and y coordinates gathered from the touch stored in the touches array, at index 0 (addition touches would be added to the array at index 1, 2, 3, etc.). Lastly, we check if this captured element where our finger currently is is the same as "myDiv". If it isn't, we know the finger has been moved off of this element.