Event Bubbling

[dapinitial]

Having trouble fixing the useCapture and stopping the propagation on inputs that I have inside the wheel. I have placed them in a circle using JavaScript so that it looks like a rotary telephone. I can spin the wheel and it won't accidentally click an input while spinning and touching, however, if you try and spin from an input on the wheel it will not spin.

Also... can you spin an SVG with this?

[dapinitial]

This is an issue with the wheel, because while it rotates the circle is really a square because of the box model and I am finding that only SVG can really mask the shape properly and not leave any hit area. Still haven't resolved the event bubble, sort of took a step back from it.

[dapinitial]

http://jsfiddle.net/ymtV3/

[dapinitial]

If anyone has a similar issue what I've done is if it's spinning, hidden the items, and I am applying a background to the wheel container that shows during it so it's a faux way of doing things. I have several layers inside the wheel so whenever an option is clicked or selected and you go into another screen it applies a particular class to change the background... This is a suitable solution for now... but I guess I would still like to figure this plugin out. I do like Touchy. Now onto the SVG foreignObject piece.

[fisherwebdev]

Hi, you're not the first person to struggle with Touchy's event delegation issues.

The idea behind Touchy is that all events are actually registering listeners on the document, so when you say:

$('#wheel').bind('touchy-rotate', handleTouchyRotate);

Contrary to how it looks and normally operates, this bind() is actually setting up a listener on the document. When the event (for example, "touchmove") bubbles up to the document, a proxy event handler fires a custom event on the element you called bind() on.

But while this is great for working with a global environment where you might need to tell the difference between a swipe and a drag, it messes with our normal use of event delegation and bubbling.

Sometimes, this can be dealt with by adding additional calls to bind() for all the elements in the tree that you are concerned with. But this does not work in the case of Touchy's rotate event. Your example is making me wonder if it wouldn't be better to be able to declare what the ultimate target of the event should be, and then all child elements would bubble their events until that target is reached... I have some experiments in the other branches of the code, but I have yet to figure out the best solution.

Please see the other discussions on the issue tracker and other branches to see where this has gone so far.

#4
#5
https://github.com/HotStudio/touchy/tree/event-target