Question

此jsfiddle会重现此问题，并允许您在1.6.4和1.7.1之间快速切换。

您会看到LI停止被检测到，因为切换到undefined

后，坐标为1.7.1

如何在不降级的情况下解决此问题？

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');     
   }    
});

Answer 1

事实证明，在1.7中，只有通过this regexp的事件具有某些“鼠标属性”（如.pageX）传递给jQuery事件对象：

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

显然，touchstart等不会通过此正则表达式。所以你必须自己将这些事件标记为鼠标事件，因为jQuery会here。如果你想要简明扼要，你可以这样做：

// 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;
});

Answer 2

另一种处理方法是使用正确的e.changedTouches。所以它会像这样工作：

if (typeof e.changedTouches !== 'undefined') {
  pageX = e.changedTouches[0].pageX;
  pageY = e.changedTouches[0].pageY;
} else {
  pageX = e.pageX;
  pageY = e.pageY;
}

希望这有帮助。

jQuery update（1.7）打破触摸事件的事件坐标？

2 个答案: