Cancel touchend if touchmove fires

Question

I'm building something mainly for use on tablets, where the user can tap an item on the screen and a class is applied to it. This is what I have so far:

The problems:

I want to use touch events to remove the class and add the class on touch end (to make it faster).
I don't want it to do anything if the user swipes (touchmoves).

I've tried a number of things, none of which have worked. The simplest I've tried (unsuccessfully) is this:

var dragging = false;

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

$('.items').on("click touchend", function(event){
    if (dragging = true){
    }
    else{
    $('.items').removeClass('selected');
    $(this).addClass('selected');
    }
});

`if (dragging = true)` should just be `if (dragging)`, or better yet `if (!dragging)` then move everything in the else statement into the if statement (therefore, you will have no else). — Jace, Apr 25 '13 at 02:49
Once you `touchmove` once, you are setting `dragging = true`, this will a not allow any other clicks as per your code. You must reset `dragging = false` after the event finishes. — James, Dec 19 '13 at 21:19

score 24 · Accepted Answer · answered Sep 17 '14 at 17:27

I would argue this is a more safe way of doing it

Setting variable to false

var dragging = false;

Setting var to true ontouchmove (allows you to reuse this code everywhere in your app)

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

Your button

$("#button").on("touchend", function(){
      if (dragging)
      return;

      // your button action code
});

Resetting variable (important)

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

score 7 · Answer 2 · answered Apr 25 '13 at 02:50

7

You want to use either of the following:

if(dragging == true)

Or, simply:

if(dragging)

You should only use a single = sign when you are setting a value, whereas two == signs should be used when checking a value. Therefore, your code should look like:

$('.items').on("click touchend", function(event){
    if(!dragging)
    {
        $('.items').removeClass('selected');
        $(this).addClass('selected');
    }
});

Notice how you do not need to check if dragging == true because you are not running any code in this case. Instead you can simply check if dragging == false or, !dragging

answered Apr 25 '13 at 02:50

What have you tried

11,018
4
31
45

for some reason it's not allowing me to add the 'select' class on touch devices, but it's working fine on desktop/laptop. – mmm Apr 25 '13 at 04:52
Here's a link to the full site: http://reveriesrefined.com/myftp/Crane/ the console isn't showing any errors in chrome or firefox. – mmm Apr 25 '13 at 04:55

score 1 · Answer 3 · answered May 27 '21 at 09:41

1

You can just check if event is cancelable. It's false after touchmove

$('.items').on("click touchend", function(event){
    if (event.cancelable){
        $('.items').removeClass('selected');
        $(this).addClass('selected');
    }
});

answered May 27 '21 at 09:41

MightZ

11
1

I think this is less complex than the accepted answer and it works. Thx – Francisco Jesus Oct 20 '22 at 15:25

Derry White · Answer 4 · 2016-02-15T17:04:00.313

where you have dragging check put

if (dragging == true){
   dragging = false;
}

else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}

it will reset it on release

also watch out for double calls on events as they sometimes trigger twice on some platforms best to check platform with first the following will help with checks

var clickEventType=((document.ontouchstart!==null)?'click':'touchend');

or

var clickEventType = 'touchend';
if(document.ontouchstart!==null)
{
     clickEventType = 'click';
}

Cancel touchend if touchmove fires

4 Answers4