Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery update (1.7) breaks event coords on touch event?

This jsfiddle reproduces the problem and allows you to quickly switch between 1.6.4 and 1.7.1.

You'll see that LIs stop being detected, because the coords are undefined after switching to 1.7.1

http://jsfiddle.net/eHHgP/2/

How can I fix this problem without downgrading?

body{
    font-family: sans-serif;
}

#other{
position: absolute;
height: 300px;
width: 300px;
background: rgba(0,0,0,0.5);
}

#other ul{
position: absolute;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
width: 200px;
height: 200px;
}

#other li{
    display: block;
    margin: 25px;
    height: 50px;
    width: 50px;
    color: white;
    background: rgba(0,0,0,0.5);
    float: left;

<div id="other">
   <ul>
       <li>LI</li>
       <li>LI</li>
       <li>LI</li>
       <li>LI</li>
   </ul>
</div>
<div id="output">
    output
<div>
$(document).bind('touchmove', function(event){
    event.preventDefault();              
});

$('#other').bind('touchstart touchmove', function(event){
    element = document.elementFromPoint(event.pageX, event.pageY);
    console.log(event);
    if(element.nodeName === 'LI'){
       $('#output').html('LI');
   }else{
       $('#output').html('NOT LI');     
   }    
});  
like image 517
fancy Avatar asked Dec 10 '11 11:12

fancy


1 Answers

It turns out that in 1.7, only events which pass this regexp have certain "mouse properties" (like .pageX) passed through to the jQuery event object:

/^(?:mouse|contextmenu)|click/

Obviously, touchstart etc. don't pass this regexp. So you'd have to mark these events as being mouse events yourself, as jQuery does here. You can do it this way if you want to go for conciseness:

// add more if necessary, I don't know much about touch events
$.each("touchstart touchmove touchend".split(" "), function(i, name) {
    jQuery.event.fixHooks[name] = jQuery.event.mouseHooks;
});
like image 59
pimvdb Avatar answered Sep 21 '22 01:09

pimvdb