touch events tester

by Yaroslav Samardak

HTML

Touch the area to see what we can detect

<div id="log"></div>

CSS

body {
	user-select: none;
}

JavaScript

$(function() {
  var log = function(msg) {
    $("<div>").text(msg).appendTo($("#log"));
		window.scrollTo(0, $("#log").height())
  };
  var logtouch = function(evtype, t) {
    log(evtype + " " + t.identifier + ": (" + t.pageX + "," + t.pageY + ") force=" + t.webkitForce + " size=" + t.webkitRadiusX + " x " + t.webkitRadiusY + " < " + t.webkitRotationAngle + "deg");
  }

  var mouseIsDown = false;

  //$(document).on("contextmenu", false);

  $(document).on("mousedown", function() {
    mouseIsDown = true;
    log("mousedown");
  });
  $(document).on("mouseup", function() {
    mouseIsDown = false;
    log("mouseup");
  });
  $(document).on("click", function() {
    log("CLICK!!!");
  });

  $(document).on("mousemove", function() {
    log("mousemove");
  });
  $(document).on("touchstart touchmove touchend touchcancel", function(ev) {
    $.each(ev.originalEvent.touches, function(i, t) {
      logtouch(ev.type + "-touches", t);
    });
    $.each(ev.originalEvent.changedTouches, function(i, t) {
      logtouch(ev.type + "-changed", t);
    });
    $.each(ev.originalEvent.targetTouches, function(i, t) {
      logtouch(ev.type + "-target", t);
    });
  });
});