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 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. While when I am binding it using javascript
using addEventListener
then evt.changedTouches
is defined.
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.
Using 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:
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.
Code of handler method :
function handleStart(evt) {
log("touchstart.");
for(var prop in evt) {
log(prop + ":" + evt[prop]);
}
}