Hủy touchend nếu touchmove cháy

Question

Tôi đang tạo thứ gì đó chủ yếu để sử dụng trên máy tính bảng, nơi người dùng có thể nhấn vào một mục trên màn hình và một lớp được áp dụng cho nó. Đây là những gì tôi có cho đến nay:

Những vấn đề:

1. Tôi muốn sử dụng các sự kiện liên lạc để loại bỏ các lớp và thêm các lớp vào cuối liên lạc (để làm cho nó nhanh hơn).
2. Tôi không muốn nó làm bất cứ điều gì nếu người dùng vuốt (touchmoves).

Tôi đã thử một số thứ, không có thứ nào trong số đó hoạt động. Cách đơn giản nhất Tôi đã thử (không thành công) là thế này:

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'); 
    } 
}); 

Answer 1

tôi sẽ tranh luận này là một cách an toàn hơn để làm việc đó

biến Thiết false

var dragging = false; 

Thiết var để ontouchmove đúng (cho phép bạn sử dụng lại mã này ở khắp mọi nơi trong ứng dụng của bạn)

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

Nút của bạn

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

     // your button action code 
}); 

Reset biến (quan trọng)

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

Answer 2

Bạn muốn sử dụng một trong hai điều sau đây:

if(dragging == true) 

Hoặc, chỉ cần:

if(dragging) 

Bạn chỉ nên sử dụng một dấu hiệu = duy nhất khi bạn đang đặt một giá trị, trong khi hai dấu hiệu == sẽ được sử dụng khi kiểm tra một giá trị. Do đó, mã của bạn sẽ giống như thế:

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

Thông báo thế nào bạn không cần phải kiểm tra xem dragging == true vì bạn không chạy bất kỳ mã trong trường hợp này. Thay vào đó bạn chỉ có thể kiểm tra xem dragging == false hay, !dragging

Answer 3

mà bạn đã kéo séc đưa

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

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

nó sẽ thiết lập lại nó trên phiên bản

cũng xem ra cho các cuộc gọi đúp vào các sự kiện như đôi khi họ kích hoạt hai lần trên một số nền tảng tốt nhất để kiểm tra nền tảng với những điều đầu tiên sau đây sẽ giúp kiểm tra

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

hoặc

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