iScroll Detecting click when scrolling

[ercgeek]

The DIV I am using inside an iScroll contains clickable elements (as you normally have on an image gallery, for example). I would like to filter out the events and not respond to a "click" when it is part of teh swipe move that is used to scroll. So, if thh user touch-scrolls the "selected" image, the one clicked, does not change.

 

Is there a way to trap the click and discard it when iScroll is in the middle of a swipe motion?

 

Thanks for any help on this.

 

erc

[Иван Миро]

+1 same problem

[Иван Миро]

This look like solution: https://groups.google.com/forum/#!searchin/iscroll/Links$20in$20a$20list$20are$20clickable$20before$20scrolling$20ends/iscroll/WgUUdZpvImw/I3VkoXBkWSMJ

But if I stoped scrolling by clicking on mouse links not works

[Иван Миро]

I think there must be unbind for "touchcancel" and "mousewheel" but no idea how call this events.

[Henrik Ammer]

I solved it by adding a scrollingclass to the wrapper with the onScrollMove and remove it on onScrollEnd.

However that sparked the problem if the swipe is stopped by tapping/clicking on the wrapper. But that was solved by adding to the clickevents on the element that if it still had the scrolling class, remove it and do nothing more.

See the example here, http://pastebin.com/QVHUBPES

The page uses jQuery 1.7.1, a pulldown (#pull) and is on swedish. The wrapper id is content.

[Ash Connell]

I have tried so many variations of fixing this including patched versions of iScroll.js and tracking mouse movement etc. The solution i found was another variation of Henrik Ammer's... adding and removing classes still fires the click event AFTER you remove the class. preventing bubbling with stopPropagation will not work either. The perfect solution to this was by adding removing the class after 200ms. It can probably be less, but that works fine for me.

onScrollMove: function(){ $('a').addClass('scrolling'); },

onScrollEnd: function(e){ setTimeout(canClickNow, 200); function canClickNow(){ $('a').removeClass('scrolling'); } }

The items that get clicked have this event listener:

$('.scroller ul li a').live('mouseup', function(e) 

{

if(!$(this).hasClass('scrolling'))

{

// Do stuff

}

});

Or you could do if($(this).hasClass('scrolling')){ e.preventDefault(); } if you are not using custom events on the anchors.