I have been super busily working on different projects at firstborn in the last couple of weeks and I finally finished the SoBe.com and squeezed some little time on my own stuff. Then I decided to build a little class to handle the touch events on mobile devices. I just finished it yesterday and published it on GitHub.

Most of the web developers when they try to build a website for tablet devices, touch event is always something hard to deal with. It will never get what you want even if it’s just a hover style on a button. NestToucher.js is a handy tool to help you to deal with this shit and spend your precious time on somewhere else.

So, what exactly does this class do? It simply applies set of touch events on the document to deal with all of the touch events on the screen. Well, you will probably think that the performance will be super slow when you want to apply a couple of hundred touch events to different elements. No worry, I didn’t make an array to store all of the touch events and calculate if the touchXY point is insides the rectangle area of each elements. I simply use document.elementfrompoint() to get the touched element from the touchXY point and bubbles it up until it hits the document. It will then only trigger the elements I want to apply the touch events on. I added a variable in the event variable called touchedTarget which is the target user is touching on and another variable called bubbleHistory which is an array list contains the bubbled elements from the touchedTarget to the target itself.

Cool isn’t it?
Feel free to download it here:
https://github.com/edankwan/NestToucher.js