how to get touchstart value in touchend event?

Question

I want to get touchstart.pageX value when touchend event is fired but I am not getting exact value. Its giving me pageX value of touchend event. What I am doing wrong?

(function($){

    $.fn.extend({ 

        //pass the options variable to the function
        swipeTest: function(options) {
            var touchStart;            
            var options =  $.extend(defaults, options);

            //initilaized objects
            function init(thisObj){
                thisObj.addEventListener('touchstart', function(e) {
                    var touch = e.touches[0] || e.changedTouches[0];
                    touchStart = touch;
                    console.log('Value of touchStart.pageX in touchstart method: ' + touchStart.pageX);
                }, false);

                thisObj.addEventListener('touchend', function(e) {
                    var touch = e.touches[0] || e.changedTouches[0];
                    console.log('Value of touchStart.pageX in touchend method: ' + touchStart.pageX);
                }, false);
            }

            return this.each(function() {
                init(this);   

            });
        }
    });

})(jQuery);

After swipe on element I am getting this in console (swipe from left-right)

Value of touchStart.pageX in touchstart method: 132
Value of touchStart.pageX in touchend method: 417
Value of touchStart.pageX in touchstart method: 32
Value of touchStart.pageX in touchend method: 481

Whey I am not getting same value in both methods? I am pointing to same variable though!!

Answer 1

You should be getting the .target value of the touch variable in your end event. That's where the touch started from. You don't even need the touchStart variable, really. The touch in the end event contains all the information you need.

//in your touchend handler, after touch = blah blah blah
var startnode = touch.target; //gets you the starting node of the touch
var x = startnode.pageX
var y = startnode.pageY