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

我在应用程序中启用了touch，了解到一个非常未知的问题。 我的

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>

这是

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确实使用“规范化”调用您的侦听器，它不一定具有您期望的所有属性。但是，您可以通过

.originalEvent

属性访问实际的

触摸事件

：

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

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

---

jQuery干预后传递的

事件
对象==事件对象以其他方式传递..如果仔细观察，您会注意到.中的
originalEvent
对我来说运行良好。谢谢你，伯吉。
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]

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

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

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