[英]Behaviour difference between javascript binding and jquery binding using .on() method
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
元素中有一个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>
In case, I am binding touchstart
event using jQuery
then evt.changedTouches
is undefined. 如果我使用jQuery
绑定touchstart
事件,那么evt.changedTouches
是未定义的。 While when I am binding it using javascript
using addEventListener
then evt.changedTouches
is defined. 当我使用addEventListener
使用javascript
绑定它时,则定义了evt.changedTouches
。
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. 这是evt
对象的日志。
Using Javascript: 使用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: 并使用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. 为什么我没有得到changedTouches
属性。
Code of handler method : 处理程序方法代码:
function handleStart(evt) {
log("touchstart.");
for(var prop in evt) {
log(prop + ":" + evt[prop]);
}
}
jQuery does call your listener with a "normalized" jQueryEvent object , which does not necessarily have all properties you'd expect. jQuery使用“规范化”的jQueryEvent对象调用您的侦听器,该对象不一定具有您期望的所有属性。 However, you can access the actual TouchEvent
via the .originalEvent
property: 但是,您可以访问实际TouchEvent
通过.originalEvent
属性:
document.getElementById("test").addEventListener("touchstart", function(e) {
console.log(e.changedTouches);
}, false);
$("#test").on("touchstart", function(e) {
console.log(e.originalEvent.changedTouches);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.