How to get continuous mousemove event when using android mobile browser?

Question

using this code:

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

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

In Windows browser like firefox, It's ok to see the mouse postion when I move mouse, but when I run this page in android(2.1) browser, I can not get the continuous event when I touch the screen, It just trigger the event when I tap the screen, why? and how to get the continuous mousemove event when I touch the screen?

Answer 1

Use the touchmove event instead (works on my Android browser on Froyo), although there are some problems with it -- the browser only updates the div when the touch has been released, however the event is still fired for every touch movement. This can be demonstrated by changing the code to this:

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

This is due to a bug in the Android browser -- you need to call event.preventDefault() to make this work as expected:

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

Official bug details: available here

To detect the current X and Y position you should use the event.touches object:

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

jQuery creates it's own "version" of the event object which doesn't have the native browsers properties such as .touches -- so you need use window.event instead

Answer 2

After reading the accepted answer, perhaps the best way to deal with on-going events for both touch and mouse is something like this?

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