Is there a Javascript "tap" event library that uses event delegation?

Question

Ideally I can do $(document.body).on("tap", "#myElement", this.eventHandler);

But jQuery hasn't done that yet.

I see so many libraries -- https://github.com/bebraw/jswiki/wiki/Touch. There's a long list on that page.

They all seem to use old fashioned event listening. Such as, $("#element").touchLibraryThingy(); $("#element").bind("tap"). Equivalent to addEventListener.

That's great for an ID (Sorta), but when I have 50 list items that all have events on them, I don't want someone on an old Android to have 50 event listeners. For performance reasons!

Does anyone know of a library that uses event delegation that is finished?

This stackoverflow question is similar but doesn't come to truth -- Extend jQuery's .on() to work with mobile touch events

Answer 1

Looks like the blob mentioned in the post Extend jQuery's .on() to work with mobile touch events actually does the trick... almost.

Link to library! https://github.com/jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js

The gotcha "tap" on desktop doesn't prevent default it seems. I had odd scrolling behavior and choppy menu animation in my web app.

To fix this I created a global property inside my app's namespace:

var R = window.R = window.R || {};
R.touchEvent = ('ontouchstart' in window') ? "tap" : "click";
window.$body = $(document.body);

Then all my event listeners do this:

$body.on(R.touchEvent, ".myHellaLongListItems", this.eventHandler);

Done! Now we all can have a really nice mobile website.

Answer 2

Better yet, now with jQuery Mobile custom builder, you can only select their mobile events and get the latest touch code, which has improvements over the example above.

http://jquerymobile.com/download-builder/