ngSwipe and horizontal scroll

Question

I'm having issues combining ng-swipe and horizontal scrolling on mobile. The use case is that I have a page that on swiping should load next or previous and inside there are modules that show a lot of information. Some of it is scrolled.

So, as soon as you scroll the swipe on the parent kicks in and you get navigated. So I put another pair of ng-swipe on the parent of the scrollable element with this sort of trickery:

self.onInnerSwipe = function($event) {
  $event.originalEvent.preventAction = true;
};

And then on the parent:

var shouldActionProceed = function($event) {
  return !$event || !$event.originalEvent || !$event.originalEvent.preventAction;
};

self.goToPrev = function($event) {
  if (shouldActionProceed($event)){
    // Do Magic
  }
}

This does the trick in the way that the action doesn't proceed if I'm swiping over that element but the scroll doesn't really work. It sorts of but it doesn't. It starts a bit and then stops.

On Chrome there are this warnings being logged sometimes.

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

I have prepared a demo here: http://jsbin.com/webologavu/2/ which is overly simplistic but you can reproduce the issue.

Any hints?

Answer 1

I think that it's a concurrency issue with these events. It might work better if you your parent event doesn't rely on the child event. To achieve that:

//add a identifier to your list element
<ul class="myList" your-other-attrs></ul>

//should proceed can rely on the target element to find out
//if the target element belongs (or is) in your list.
var shouldActionProceed = function($event) {
    return !$($event.target).hasClass("myList") &&  //is myList?
        $($event.target).parents(".myList").length == 0; //has parent 'myList'?
};

This way, the parent event can work on its on.