polyfill which mimics touch events in Internet Explorer 10+

Touchr

The core idea of Touchr is that many mobile web sites are prepared for touchable devices but are incompatible with new Internet Explorer 10+ pointer gestures. This package automatically mimics touch and gesture events in IE 10+ browser.

Usage:

<script type="text/javascript" src="js/touchr.js"></script>

By including touchr.js your Internet Explorer browser will start generating mouse events as well because of setting CSS touchAction property on whole document to be able to handle pointer events.

Interaction:

element.addEventListener("touchstart", function(e){console.log(e)});

Fine tuning:

Touchr by default convert to touch events only pointer events with touch type. That behavior can be overwritten setting bitmask property window.Touchr_ALLOWED_POINTER_TYPE before script tag which loads touchr.js. Available values are:

• 1: touch (default setting)
• 2: mouse
• 4: pen

Licence:

Touchr is distributed under terms of MIT licence.

Demo:

Try to draw on canvas bellow with finger in touchable browser or IE 10+.

Sample code:

<canvas id="canvas"
    style="width: 500px; height: 500px; border: 1px solid gray;">
</canvas>
<script>
  function viewportOffset(forElement) {
    var value = forElement.getBoundingClientRect();
    return {left: value.left, top: value.top};
  }

  var obj = document.getElementById('canvas'),
      ctx = obj.getContext("2d"),
      touched = false;
  obj.width = obj.height = 500;
  ctx.fillStyle = "#FF0000";

  obj.addEventListener("touchstart", function(event){
      var touch = event.touches[0];
      if (touch) {
          touched = true;
      }
  });

  obj.addEventListener('touchmove', function(event) {
      var touch = event.touches[0];
      var offset = viewportOffset(obj);
      if (touched) {
          var x = touch.clientX - offset.left,
              y = touch.clientY - offset.top;
          ctx.fillRect(x - 1, y - 1, 2, 2);
      }
  });

  obj.addEventListener('touchend', function(event) {
      touched = false;
  });
</script>