stephband/jquery.event.swipe

StopPropogation in the event doesn't stop event from bubbling through events

Closed this issue · 5 comments

Because the work of the plugin is based on the movestart event, only stopping swipe* event is not sufficient to prevent event bubbling. To stop it movestart event should also be stopped. I think, it will be better, if swipe event will not have such a dependency.

The point of making the swipe event dependent on move events is to share functionality. If it was not dependent, most of the code in the move events would have to be duplicated in the swipe event - and in other events that depend on the move events. I find these low-level events like the move events a very convenient way of encapsulating 'buiding blocks' of behaviour. (The move events are actually not very far away from Microsoft's proposed pointer events.)

That said, I'm aware that the swipe event is less than perfect - the swipe event doesn't actually bubble and won't delegate, so you're right, you can't stop propogation - in that sense it's like native scroll events, which fire only on the DOM nodes that are scrolling. So if you have another swipe listener bound higher up the tree, that will do it's own swiping.

Supporting delegation is expensive. And complex. And I decided to keep swipe events lightweight, because I haven't yet come across a situation where I have needed to have 'nest' swipe bindings. You obviously have :) Sorry.

Is there a reason you can't simply stopPropogation of moveend?

I've opened the bug just because it's not evident behaviour. If it's hard to implement, I think, that it will be sufficient just to describe this in the readme

Updated README to make this clear.

I came across a problem, that might be because if the "no-delegation" of the swipe-events:
Because the jquery-live() function is depricated, one of the recommended ways to attach an event-handler, is with ".on()".
And as my .swipe-compontent is updated regularly via ajax I need to use "delegated events":
Like this:
$("document").on("swiperight", ".swipe", function(event){
console.log("swipe right")
});

But exactly this does not work then..

(BTW: nice work! and great libraries!)

Hi hubyhub,

I have been able to work around that limitation by using a function returning a jQuery object rather than a selector for attaching events.

For example:

function getElementsToSwipe() {
    return $('.swipe');
}

$(document).on('swiperight', getElementsToSwipe(), function(e) {
    console.log('swiped right');
});

I just have no idea how and why it works!


UPDATE: it doesn't work actually