javascript - 使用android移动浏览器时如何获得连续的mousemove事件？

Question

使用此代码:

<h2 id="status">
0, 0
</h2>

<script type="text/javascript">
   $('html').mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
</script>

在像firefox这样的Windows浏览器中，移动鼠标时可以看到鼠标位置，但是在android(2.1)浏览器中运行此页面时，触摸屏幕时无法获取连续事件，它只是触发当我点击屏幕时的事件，为什么？以及当我触摸屏幕时如何获得连续的 mousemove 事件？

Answer 1

使用 touchmove 事件代替(在我的 Froyo 上的 Android 浏览器上工作)，虽然它有一些问题 - 浏览器仅在触摸释放时更新 div，但是事件每次触摸 Action 都会触发。这可以通过将代码更改为:

var x = 0;
$('html').bind('touchmove', function(e) {
    $('#status').html(x++); // Only updates on touch release
});

这是由于 bug in the Android browser -- 您需要调用 event.preventDefault() 以使其按预期工作:

var x = 0;
$('html').bind('touchmove', function(e) {
    e.preventDefault();
    $('#status').html(x++); // Only updates on touch release
});

官方错误详情:available here

要检测当前的 X 和 Y 位置，您应该使用 event.touches 对象:

$(window).bind('touchmove', function(jQueryEvent) {
   jQueryEvent.preventDefault();
   var event = window.event;
   $('#status').html('x='+event.touches[0].pageX + '  y= ' + event.touches[0].pageY);
});

jQuery 创建它自己的事件对象的“版本”，它没有诸如 .touches 之类的原生浏览器属性——所以你需要使用 window.event而是