javascript - 使用 .on() 方法的 javascript 绑定(bind)和 jquery 绑定(bind)之间的行为差​​异

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 绑定(bind) touchstart 事件，则 evt.changedTouches 未定义。当我使用 addEventListener 使用 javascript 绑定(bind)它时，定义了 evt.changedTouches 。

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

这是 evt 对象的日志。

使用 JavaScript:

META_MASK:8SHIFT_MASK:4CONTROL_MASK:2ALT_MASK:1BUBBLING_PHASE:3AT_TARGET:2CAPTURING_PHASE:1NONE:0explicitOriginalTarget:[object HTMLImageElement]originalTarget:[object HTMLImageElement]timeStamp:1391156064876000isTrusted:truedefaultPrevented:falsecancelable:truebubbles:trueeventPhase:1currentTarget:[object HTMLDivElement]target:[object HTMLImageElement]type:touchstartgetPreventDefault: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:32768SCROLL_PAGE_UP:-32768isChar:falsecancelBubble:falserangeOffset:2rangeParent:[object HTMLDivElement]which:0pageY:0pageX:0layerY:0layerX:0detail:0view:[object Window]initUIEvent:function initUIEvent() {    [native code]}shiftKey:falsectrlKey:falsemetaKey:falsealtKey:falsechangedTouches:[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:undefinedhandleObj:[object Object]delegateTarget:[object HTMLDivElement]altKey:falsebubbles:truecancelable:truectrlKey:falsecurrentTarget:[object HTMLDivElement]eventPhase:3metaKey:falserelatedTarget:undefinedshiftKey:falsetarget:[object HTMLImageElement]view:[object Window]which:0jQuery110206995978341320994:truetimeStamp:1391156163606000isDefaultPrevented:function returnFalse() {    return false;}type:touchstartoriginalEvent:[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]);
            }
}

Answer 1

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

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

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