Xác định hướng dọc của một touchmove

Question

Tôi đang cố gắng triển khai trình xử lý cảm ứng cho máy tính bảng để kích hoạt một số tác vụ tùy thuộc vào việc nó chạm lên hoặc xuống.

Tôi cố gắng nghe mẹ đẻ:

($document).bind('touchmove', function (e) 
{ 
    alert("it worked but i don't know the direction"); 
}); 

Nhưng tôi không biết làm thế nào để xác định phương hướng.

Điều này có khả thi không?

Hoặc tôi có cần sử dụng touchstart/touchend, nếu tôi cần điều này, tôi có thể xác định hướng trước khi chuyển động cảm ứng dừng lại không?

Nếu tôi chỉ có thể thực hiện việc này với thư viện bên ngoài, thư viện nào là tốt nhất?

cảm ơn.

Answer 1

Bạn cần lưu vị trí cuối cùng của lần chạm, sau đó so sánh vị trí đó với điểm chạm hiện tại.
dụ Rough:

var lastY; 
$(document).bind('touchmove', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    if(currentY > lastY){ 
     // moved down 
    }else if(currentY < lastY){ 
     // moved up 
    } 
    lastY = currentY; 
}); 

Answer 2

tôi đã có một số vấn đề trong Ipad và giải quyết nó với hai sự kiện

var ts; 
$(document).bind('touchstart', function (e){ 
    ts = e.originalEvent.touches[0].clientY; 
}); 

$(document).bind('touchend', function (e){ 
    var te = e.originalEvent.changedTouches[0].clientY; 
    if(ts > te+5){ 
     slide_down(); 
    }else if(ts < te-5){ 
     slide_up(); 
    } 
}); 

Answer 3

Aureliano của câu trả lời có vẻ là thực sự chính xác, nhưng bằng cách nào đó nó không làm việc cho tôi, vì vậy cho anh ta các khoản tín dụng tôi đã quyết định để cải thiện câu trả lời của mình với những điều sau đây:

var ts; 
$(document).bind('touchstart', function(e) { 
    ts = e.originalEvent.touches[0].clientY; 
}); 

$(document).bind('touchmove', function(e) { 
    var te = e.originalEvent.changedTouches[0].clientY; 
    if (ts > te) { 
     console.log('down'); 
    } else { 
     console.log('up'); 
    } 
}); 

tôi chỉ đơn giản là thay đổi sự kiện 'touchend' cho 'touchmove'

Answer 4

Giải pháp này có tính đến thay đổi trong các hướng mà câu trả lời hiện tại không. Các giải pháp dưới đây cũng sẽ chăm sóc độ nhạy cảm ứng; điều này khi người dùng di chuyển theo một hướng nhưng khi chạm vào, ngón tay người dùng di chuyển theo một hướng khác sẽ làm rối tung hướng thực tế.

var y = 0; //current y pos 
var sy = y; //previous y pos 
var error = 5; //touch sensitivity, I found between 4 and 7 to be good values. 

function move(e) { 
    //get current y pos 
    y = e.pageY; 

    //ingnore user jitter 
    if (Math.abs(y - sy) > error) { 
     //find direction of y 
     if (y > sy) { 
      //move down 
     } else { 
      //move up 
     } 
     //store current y pos 
     sy = y; 
    } 
} 

Answer 5

Tôi đã tạo tập lệnh để đảm bảo một phần tử trong tài liệu của bạn sẽ cuộn mà không cần cuộn bất kỳ thứ gì khác, kể cả nội dung. Điều này hoạt động trong trình duyệt cũng như thiết bị di động/máy tính bảng.

// desktop scroll 
$('.scrollable').bind('mousewheel DOMMouseScroll', function (e) { 
    var e0 = e.originalEvent, 
    delta = e0.wheelDelta || -e0.detail; 

    this.scrollTop += delta * -1; 
    e.preventDefault(); 
}); 

var lastY; 
var currentY; 

// reset touch position on touchstart 
$('.scrollable').bind('touchstart', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    lastY = currentY; 
    e.preventDefault(); 
}); 

// get movement and scroll the same way 
$('.scrollable').bind('touchmove', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    delta = currentY - lastY; 

    this.scrollTop += delta * -1; 
    lastY = currentY; 
    e.preventDefault(); 
});