Prevent click on Ipad/Iphone when sliding a jquery slider

Question

I have structure

<div>
  <ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

I have created sliding for iphone/ipad, I set the overflow:hidden on DIV and move UL up and down

The problem is that when I start touchstart event, by puting my finger on a link <a></a> and moving my finger up and down for slide, after sliding is done the location of the page is changed, the link click worked... I need to prevent that

I want to change the location of the page only and only when touchend is occured just after touchstart, no touchmove between them...

Give me advises please, Thank you

You might be interested on this answer: http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both — Roko C. Buljan, Aug 20 '12 at 10:52
Thanks for your answer, I've checked out the link, but unfortunately it doesn't not fix my issue — ArmeniaH, Aug 20 '12 at 10:58
I only have touchstart event, which also is click when touchstarted on a element — ArmeniaH, Aug 20 '12 at 10:59

score 0 · Answer 1 · answered Aug 20 '12 at 12:47

inner_container.bind('touchstart', function(e) {
//e.preventDefault();
   .... 
});

inner_container.on('click', 'a', function(e) {
  if(touch_moving){
    touch_moving = 0;
    return false;
  }
});

inner_container.bind('touchmove', function(e) {
  touch_moving = 1;
  ...
});

Notice that in touchstart default is not prevented !

Prevent click on Ipad/Iphone when sliding a jquery slider

1 Answers1