checking if touchend comes after a drag

Use two listeners:

First set a variable to false:

var dragging = false;

Then ontouchmove set dragging to true

$("body").on("touchmove", function(){      dragging = true;});

Then on drag complete, check to see if dragging is true, and if so count it as a dragged touch:

$("body").on("touchend", function(){      if (dragging)          return;      // wasn't a drag, just a tap      // more code here});

The touch end will still fire, but will terminate itself before your tap script is run.

To ensure the next time you touch it isn't already set as dragged, reset it back to false on touch down.

$("body").on("touchstart", function(){    dragging = false;});

Looks like one solution to my problem is found here:

http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/

This bit of code detects any move after touchstart in order to abort tap behavior after tapend.

var tapArea, moved, startX, startY;tapArea = document.querySelector('#list'); //element to delegatemoved = false; //flags if the finger has movedstartX = 0; //starting x coordinatestartY = 0; //starting y coordinate//touchstart           tapArea.ontouchstart = function(e) {    moved = false;    startX = e.touches[0].clientX;    startY = e.touches[0].clientY;};//touchmove    tapArea.ontouchmove = function(e) {    //if finger moves more than 10px flag to cancel    //code.google.com/mobile/articles/fast_buttons.html    if (Math.abs(e.touches[0].clientX - startX) > 10 ||        Math.abs(e.touches[0].clientY - startY) > 10) {            moved = true;    }};//touchendtapArea.ontouchend = function(e) {    e.preventDefault();    //get element from touch point    var element = e.changedTouches[0].target;    //if the element is a text node, get its parent.    if (element.nodeType === 3) {         element = element.parentNode;    }    if (!moved) {        //check for the element type you want to capture        if (element.tagName.toLowerCase() === 'label') {            alert('tap');        }    }};//don't forget about touchcancel!tapArea.ontouchcancel = function(e) {    //reset variables    moved = false;    startX = 0;    startY = 0;};

More here:https://developers.google.com/mobile/articles/fast_buttons

I would say you can't tell the difference when the user drags to see more content or drag the element arround. I think you should change the approach. You could detect if it's a mobile device and then draw a switch that will enable/disable the movement of the element.