touch events tester

by shapeshifta

HTML

Touch the area to see what we can detect
<div id="log"></div>

CSS

span {
    display: block;
    margin: 5px 0
}

JavaScript

var log = function (msg) {
    if ($('#log span').length >= 5) {
        $("#log").empty();
    }
    $("<span>").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("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);
    });
});