Mapping Touch Events to Mouse Events

This sample code shows how to map touch events to mouse events.

Author : Chtiwi Malek
http://www.codicode.com

Framework 1 :

Framework 2 :

+ Js file(s) :

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="167" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

Javascript

var isDown = false;

$('#caree').mousedown(function (e) { 
  isDown = true;
});

$('html').mouseup(function (e) { 
  isDown = false;
});
$('html').mousemove(function (e) {
  if (isDown)
  {
    $('#caree').offset({ top: e.pageY-40, left: e.pageX-40 });
  }
});

function touch2Mouse(e)
{
  var theTouch = e.changedTouches[0];
  var mouseEv;

switch(e.type)
  {
    case "touchstart": mouseEv="mousedown"; break;  
    case "touchend":   mouseEv="mouseup"; break;
    case "touchmove":  mouseEv="mousemove"; break;
    default: return;
  }

var mouseEvent = document.createEvent("MouseEvent");
  mouseEvent.initMouseEvent(mouseEv, true, true, window, 1, theTouch.screenX, theTouch.screenY, theTouch.clientX, theTouch.clientY, false, false, false, false, 0, null);
  
  theTouch.target.dispatchEvent(mouseEvent);
  e.preventDefault();
}

document.addEventListener("touchstart", touch2Mouse, true);
document.addEventListener("touchmove", touch2Mouse, true);
document.addEventListener("touchend", touch2Mouse, true);

Mapping Touch Events to Mouse Events

Link :

Fork button :

Embed preview :