如何使用Android手机浏览器获得连续的鼠标移动事件?

使用这个代码:

<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)浏览器中运行这个页面时,当我触摸屏幕时,我无法获得连续的事件,我点击屏幕,为什么? 以及当我触摸屏幕时如何获得持续的鼠标移动事件?

Solutions Collecting From Web of "如何使用Android手机浏览器获得连续的鼠标移动事件?"

使用touchmove事件(在Froyo的Android浏览器上工作),虽然有一些问题 – 浏览器只会在触摸释放时更新div,但是每次触摸移动都会触发事件。 这可以通过更改代码来演示:

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

这是由于Android浏览器中的一个错误 – 您需要调用event.preventDefault()以使其按预期工作:

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

官方bug详细信息: 可在这里

要检测当前的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创build它自己的事件对象的“版本”,它没有像.touches这样的本机浏览器属性 – 所以你需要使用window.event来代替

在阅读接受的答案后,也许处理触摸和鼠标正在进行的事件的最好方法是这样的?

 <div id="status">x, y</div> <script> $('html').on("mousemove touchmove", function(e){ $('#status').html(e.pageX +', '+ e.pageY); e.preventDefault(); }); </script>