feature idea/request: delegating events to a containerelement

[maerten]

Hi!

Binding Touchy.js on 40+ elements on iOS (iPhone 4) casues my webapps UI to hang for a few seconds. Using event delegation should speed things up.

    Touchy(element, callback(hand, finger) {} );

could become:

    Touchy(containerelement, cssSelector, callback(hand, finger, element) {} );

or something like

    Touchy(containerelement, cssSelector, callback(hand, finger) {
      // finger.element
    } );

[jairajs89]

Interesting. I haven't stress tested this at all since I wrote it for simple touch interactions on two elements for a project of mine. I'll look into it. I'm thinking of changing the format this library to allow developers to turn on/off Touchy instances so that you can manage efficiency as needed.

I'm curious though, why do you have 40+ elements on a page with touch interactions?

[maerten]

Alright, sounds great!

About the 40+ elements.. It's a scrollable list of items. I'm trying to replicate the behavior of different iphone UI elements. So a back-button works great with touchy as it is now, but a scrollable list gets problematic for performance reasons. I don't want to use raw touch events, right now I like the idea that if i can get things to work for 1 finger (the main use case), adding interaction for more fingers should only be a small extra step.

Another use-case of delegates that comes to mind: on a list, multitouch interaction can be done with multiple elements at the same time. I could for example use 1 finger for scrolling the list (on which the touch events are bound) and selecting items for viewing (by finding the event.srcElement). Then the lists' behavior could be extended: by holding down the thumb on the bottom of the list (to "keep it in place") and then using the index finger to move an element around in the list. (I think that right now, multitouch interaction only applies to the attached element?).

p.s. if you want i can send you my adapted TouchyDelegate.js version, just write me a message

[bitfool]

I would like this! Maerten, I'd like to see your TouchyDelegate.js version. I just started work with Touchy today, but will likely have as many as 100 or more elements, and I need good cross platform interactivity (ie, works well both on iPad and browsers).

FWIW, I'm developing a cross-platform web app that has quite complex interactions. Buttons move around when "flicked" with a touch, moving not only around the screen but changing place in the DOM to provide robust grouping. I'm in need of a library like this, and will be stress testing it thoroughly. Thanks.

[RobbinHabermehl]

Ideally, more specific events would be extremely useful as well in combination with the implementations suggested by Maerten. The events would be tap(/click), double tap (/double click) and hold. This would make Touchy the perfect interaction control!