{"id":1210,"date":"2013-01-31T20:17:22","date_gmt":"2013-02-01T01:17:22","guid":{"rendered":"http:\/\/www.ikriv.com\/blog\/?p=1210"},"modified":"2013-01-31T20:17:22","modified_gmt":"2013-02-01T01:17:22","slug":"touches","status":"publish","type":"post","link":"https:\/\/ikriv.com\/blog\/?p=1210","title":{"rendered":"Touches"},"content":{"rendered":"

I wrote a little web page<\/a> that “debugs” HTML 5 touch interface (requires touch screen device). Unlike regular mouse clicks, there is no “onTouch” attribute, you have to add and remove listeners via addEventListener()<\/code> method of a DOM element. Event name is passed as string, which is not very safe, but hey, it’s JavaScript, folks! Nothing is save there.<\/p>\n

Another quirk is that unlike MouseUp<\/code> notification in various graphic systems, touchend<\/code> event does not give you coordinates. In some way this makes sense, because the mouse has only one on-screen cursor, and touch interface must support multiple touches. By the time of touchend<\/code> the number of current touches is zero, which is reflected in the event.<\/p>\n

Unfortunately, this means that even if you are only interested in the start and end point of a touch, you still must monitor the touchmove<\/code> event.<\/p>\n

I tested the app on three different phones and here are the results:<\/p>\n

Motorola Droid Razr Maxx<\/b> – can handle virtually any number of touches. The maximum I was able to reach was 12; I am sure the software can handle even more, but we ran out of screen space. Just in case: I ran out of my own fingers at 10 touches and had to use other people’s help to reach 12 \ud83d\ude42<\/p>\n

IPhone 4S<\/b> – bails out after 5 touches (go backs to zero if I remember correctly). Not very cool and kinda sloppy, but enough for the vast majority of practical applications.<\/p>\n

HTC Droid Incredible<\/b> – I could not get it to work with more than one touch, because it ignores “user-scalable=no<\/code>” meta tag. When you touch screen we second finger, the touch event is not passed to the web page, and the page is zoomed instead.<\/p>\n

Oh, yeah, and the relevant piece of JavaScript code is below. I did not use JQuery or any similar framework on purpose, to get to the bare bones API.<\/p>\n

function reporter(name) {\n    return function (e) {\n        e.preventDefault();\n\n        var message =\n            name + \"<br\/>\" +\n            \"touches: \" + e.touches.length + \"<br\/>\";\n\n        for (var i = 0; i < e.touches.length; ++i) {\n            var touch = e.touches[i];\n            message += \"screenX: \" + touch.screenX + \"<br\/>\";\n            message += \"screenY: \" + touch.screenY + \"<br\/>\";\n        }\n\n        var info = document.getElementById(\"info\");\n        info.innerHTML = message;\n    };\n}\n\nfunction report(name) {\n    window.addEventListener(name, reporter(name), true);\n}\n\nreport(\"touchstart\");\nreport(\"touchmove\");\nreport(\"touchend\");<\/code><\/pre>\n
CodeProject<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I wrote a little web page that “debugs” HTML 5 touch interface (requires touch screen device). Unlike regular mouse clicks, there is no “onTouch” attribute, you have to add and […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[4,20,15],"tags":[],"class_list":["entry","author-ikriv","post-1210","post","type-post","status-publish","format-standard","category-hack","category-mobile","category-webdev"],"_links":{"self":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1210"}],"version-history":[{"count":0,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1210\/revisions"}],"wp:attachment":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}