使用.on（）方法在javascript绑定和jquery绑定之间的行为差​​异

Question

我在我的应用程序中启用触摸功能，开始了解一个非常未知的问题。 我的img元素中有一个div元素，如图所示。

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

如果我使用touchstart绑定jQuery事件，则evt.changedTouches未定义。当我使用javascript使用addEventListener绑定它时，会定义evt.changedTouches。

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

以下是evt对象的日志。

使用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]
}

并使用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]

我们可以清楚地看到差异。为什么会这样？为什么我没有获得changedTouches财产。

处理程序代码方法：

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

Answer 1

jQuery确实使用“标准化”jQueryEvent object来调用您的侦听器，这不一定具有您期望的所有属性。但是，您可以通过TouchEvent属性访问实际的.originalEvent：

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

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