Javascript jQuery更新（1.7）在触摸事件上打破事件协调？

这个JSFIDLE重现了这个问题，并允许您在

1.6.4

和

1.7.1

之间快速切换

您将看到LIs停止被检测，因为切换到

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

正文{
字体系列：无衬线；
}
#其他{
位置：绝对位置；
高度：300px；
宽度：300px；
背景：rgba（0,0,0,0.5）；
}
#其他保险商实验室{
位置：绝对位置；
顶部：50px；
右：50px；
底部：50px；
左：50px；
宽度：200px；
高度：200px；
}
#其他李{
显示：块；
利润率：25px；
高度：50px；
宽度：50px；
颜色：白色；
背景：rgba（0,0,0,0.5）；
浮动：左；

李
李
李
李

输出
$（文档）.bind（'touchmove'，函数（事件）{
event.preventDefault（）；
});
$（“#其他”）.bind（'touchstart touchmove'，函数（事件）{
元素=document.elementFromPoint（event.pageX，event.pageY）；
console.log（事件）；
if（element.nodeName=='LI'）{
$（'#output'）.html（'LI'）；
}否则{
$（'#output'）.html（'NOT LI'）；
}    
});  

事实证明，在1.7中，只有传递的事件才具有某些“鼠标属性”（如

.pageX

）传递给jQuery事件对象：

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

显然，

touchstart

等不会传递此regexp。因此，您必须像jQuery一样将这些事件标记为鼠标事件。如果您想要简洁，可以这样做：

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

---

另一种处理方法是使用适当的e.ChangedTouchs。因此，它的工作原理如下：

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

---

希望这能有所帮助。

你能试试

event.originalEvent.pageX

吗？@T.J.Crowder据我所知，事件对象是从dom中未经修改传递过来的，对吧？我认为jQuery不应该对它有任何影响。”我想，因为坐标是

未定义的
，使用1.7.1“当然你可以确定地测试它吗？”幻想：“据我所知，事件对象是未经修改地从dom传递的，对吗？”不，一点也不，jQuery对它做了很多事情：如果您想要原始事件对象，它可以作为
event.originalEvent
@T.J.Crowder:在1.7中，只有通过以下regexp的属性才能获得“鼠标状态”"并将其
.pageX
属性等传递给jQuery事件对象：。触摸事件不传递此regexp。另请参见。您之前使用event.originalEvent.pageX在另一台设备上工作过。这似乎是一种方法。不确定我测试的第一台设备是什么情况。@fancy:您应该始终能够全部回到
.originalEvent
，因为这是本机的“正常”事件对象，没有被jQuery.hmm触及，所以看起来
touchend
至少在iPad上没有pageX属性（我想是因为“鼠标”不再出现在屏幕上了吧）。有人能确认吗？如果您使用的是jQuery 3，请删除此代码或删除它（如果还需要支持jQuery 1或2）仅在定义了
jQuery.event.fixHooks
时运行它。