Replace mousemove with touchmove event

Question

My program recognizes the mousemove event. What I would like to do is make my program work for mobile.

That is why I would like to transform the mousemove event to a touchmove event.

My code is like this so far:

var d=ctx.getImageData(0,0,canvas.width,canvas.height).data;
$hit=$("#hit");
$("#canvas").mousemove(function(e){handleMouseMove(e);});

tolerance = 20;
function handleMouseMove(e){

  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  var isHit=d[(mouseY*cw+mouseX)*4+3]>tolerance;

  if(isHit){
    $hit.text("Yeahhhh");
  }else{
    //document.onmousemove = crash;
    $hit.text("Noooooooo");
  }
}

Is there a way that I can do that easily?

I have read that is equivalent When to use touchmove vs mousemove? but I am not sure how to handle the mouseX and the mouseY.

use a touch library like [jQuery mobile](http://jquerymobile.com) or [hammer.js](http://eightmedia.github.io/hammer.js/) for handle touch events.. the event objects will have all the info you'll need... — T J, Jun 05 '14 at 11:48

score 0 · Answer 1 · answered Jun 05 '14 at 11:58

0

toe.js - a lightweight touch events library, works pretty well. Hammerjs definitely has more customization, but toejs looked simpler.

and have a suggestion in your code to avoid unnecessary event.stopPropagation, see here.

answered Jun 05 '14 at 11:58

Sony George

558
2
8
16

score -1 · Answer 2 · answered Jun 05 '14 at 11:48

-1

You can use jQuery UI Touch Punch for hack jquery events

read this:http://touchpunch.furf.com/

answered Jun 05 '14 at 11:48

Vahid Moradi

791
7
16

Replace mousemove with touchmove event

2 Answers2