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');
}
});
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;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With