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

Question

using this code:

0, 0




        

Answer 1

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>

Answer 2

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