Touch Test Page

by Abhijeet Deshmukh

HTML

Touch the area to see what we can detect

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

JavaScript

$(function() {
    var log = function(msg) {
        $("<div>").text(msg).appendTo($("#log"));
        console.log(msg);
    };
    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); });
    });
});