Prevent touchstart event when scrolling/swiping on mobile devices

Question

I have a site that needs to work on mobile devices. If I touch a link while attempting to scroll down the page, it triggers the touchstart event (in most cases loading a new window, but in the case of the header, navigating through the menu). I want to be able to scroll without touchstart events being triggered. How can I accomplish this?

Answer 1

I've figured out a solution that works for most clickable items on the page:

$(document).bind("touchstart", function (e) {
    touchStartPos = $(window).scrollTop();
}).bind("touchend", function (e) {
    var distance = touchStartPos - $(window).scrollTop();
    if (distance > 20 || distance < -20) {
        e.preventDefault;
    }
});

A few items on my page seem to not get bound, but you can just specifically bind each item as needed in addition to doing a general $(document).bind().