Behaviour difference between javascript binding and jquery binding using .on() method

Question

I am enabling touch in my application, came to know a very unknown issue. I have a img element inside my div element as shown.

<div id="test">
        <ul>
            <li><img src="images/1.jpg" alt="img1"/></li>
            <li><img src="images/2.jpg" alt="img2"/></li>
        </ul>
</div>

In case, I am binding touchstart event using jQuery then evt.changedTouches is undefined. While when I am binding it using javascript using addEventListener then evt.changedTouches is defined.

    var el = document.getElementById("test");
    //Using Javascript
    el.addEventListener("touchstart", handleStart, false);
    //Using jQuery
    $("#test").on("touchstart",handleStart);

Here is the log of evt object.

Using Javascript:

META_MASK:8
SHIFT_MASK:4
CONTROL_MASK:2
ALT_MASK:1
BUBBLING_PHASE:3
AT_TARGET:2
CAPTURING_PHASE:1
NONE:0
explicitOriginalTarget:[object HTMLImageElement]
originalTarget:[object HTMLImageElement]
timeStamp:1391156064876000
isTrusted:true
defaultPrevented:false
cancelable:true
bubbles:true
eventPhase:1
currentTarget:[object HTMLDivElement]
target:[object HTMLImageElement]
type:touchstart
getPreventDefault:function getPreventDefault() {
    [native code]
}
initEvent:function initEvent() {
    [native code]
}
preventDefault:function preventDefault() {
    [native code]
}
stopImmediatePropagation:function stopImmediatePropagation() {
    [native code]
}
stopPropagation:function stopPropagation() {
    [native code]
}
SCROLL_PAGE_DOWN:32768
SCROLL_PAGE_UP:-32768
isChar:false
cancelBubble:false
rangeOffset:2
rangeParent:[object HTMLDivElement]
which:0
pageY:0
pageX:0
layerY:0
layerX:0
detail:0
view:[object Window]
initUIEvent:function initUIEvent() {
    [native code]
}
shiftKey:false
ctrlKey:false
metaKey:false
altKey:false
changedTouches:[object TouchList]
targetTouches:[object TouchList]
touches:[object TouchList]
initTouchEvent:function initTouchEvent() {
    [native code]
}

and using jQuery:

stopImmediatePropagation:function () {
        this.isImmediatePropagationStopped = returnTrue;
        this.stopPropagation();
    }
stopPropagation:function () {
        var e = this.originalEvent;

        this.isPropagationStopped = returnTrue;
        if ( !e ) {
            return;
        }
        // If stopPropagation exists, run it on the original event
        if ( e.stopPropagation ) {
            e.stopPropagation();
        }

        // Support: IE
        // Set the cancelBubble property of the original event to true
        e.cancelBubble = true;
    }
preventDefault:function () {
        var e = this.originalEvent;

        this.isDefaultPrevented = returnTrue;
        if ( !e ) {
            return;
        }

        // If preventDefault exists, run it on the original event
        if ( e.preventDefault ) {
            e.preventDefault();

        // Support: IE
        // Otherwise set the returnValue property of the original event to false
        } else {
            e.returnValue = false;
        }
    }
isImmediatePropagationStopped:function returnFalse() {
    return false;
}
isPropagationStopped:function returnFalse() {
    return false;
}
data:undefined
handleObj:[object Object]
delegateTarget:[object HTMLDivElement]
altKey:false
bubbles:true
cancelable:true
ctrlKey:false
currentTarget:[object HTMLDivElement]
eventPhase:3
metaKey:false
relatedTarget:undefined
shiftKey:false
target:[object HTMLImageElement]
view:[object Window]
which:0
jQuery110206995978341320994:true
timeStamp:1391156163606000
isDefaultPrevented:function returnFalse() {
    return false;
}
type:touchstart
originalEvent:[object TouchEvent]

We can clearly see the difference. Why it is? Why I am not getting changedTouches property.

Code of handler method :


function handleStart(evt) {
            log("touchstart.");
            for(var prop in evt) {
                log(prop + ":" + evt[prop]);
            }
}

The event object passed after intervention by jQuery !== event object passed otherwise.. — techfoobar
If you had looked closely, you would have noticed the originalEvent inside the jQuery event object. — Tomalak

Bergi Bergi · Accepted Answer · 2014-01-31T08:42:47

jQuery does call your listener with a "normalized" jQueryEvent object, which does not necessarily have all properties you'd expect. However, you can access the actual TouchEvent via the .originalEvent property:

document.getElementById("test").addEventListener("touchstart", function(e) {
    console.log(e.changedTouches);
}, false);

$("#test").on("touchstart", function(e) {
    console.log(e.originalEvent.changedTouches);
});

Behaviour difference between javascript binding and jquery binding using .on() method

1 Answers