Can't scroll anymore on touchstart

Question

I want to add touchstart event on my li without disabling scroll on the parent.

Currently, it works. I have the scroll on timeline and I can click on li.

When I add touchstart, I can click one of the li, it's better than click on a mobile. But the problem is, I can't scroll anymore on timeline...

Can I differentiate touchstart, long press, touchmove or something like that ?

<ul id="timeline">
  <li></li>
  <li></li>
  ...
  <li></li>
  <li></li>
</ul>

$("#timeline").find(" > li").on("click", function(e){
   e.preventDefault();
   ...
});

I would like to use :

$("#timeline").find(" > li").on("touchstart click", function(e){
   e.preventDefault();
   ...
});

Answer 1

Take a look at this jQuery touchSwipe plugin.

It lets you detect whether it was a long touch or a short touch which could solve the problem for you.

E.g.:

$(function() {  

    $("#timeline").find(" > li").swipe( {
        longTap:function(event, target) {
            event.preventDefault();
            // further code
        },
        allowPageScroll: "auto"
    });

});

Further you can enable page scrolling and define how it's handled:

Page scrolling demo