使用.on（）方法在javascript綁定和jquery綁定之間的行為差​​異

Question

我在我的應用程序中啟用觸摸，了解了一個非常未知的問題。 我在div元素中有一個img元素，如圖所示。

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

如果我使用jQuery綁定touchstart事件，那么evt.changedTouches是未定義的。 當我使用addEventListener使用javascript綁定它時，則定義了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對象調用您的偵聽器，該對象不一定具有您期望的所有屬性。 但是，您可以訪問實際TouchEvent通過.originalEvent屬性：

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

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