Lấy các tọa độ chạm vào trong một sự kiện touchend

Question

Khi xảy ra sự kiện chạm, có thể biết nơi bắt đầu chạm (chạm vào tọa độ) không? Thoạt nhìn, điều này có vẻ dễ dàng như lưu các tọa độ trong quá trình khởi động, nhưng giả sử sự kiện được gắn vào tất cả các phần tử DOM với một lớp cụ thể (ví dụ: .special). Bây giờ hãy xem xét rằng tôi chạm vào hai đối tượng với lớp .special sau đó nhấc ngón tay của tôi ra khỏi một đối tượng. Tôi không thể chỉ nhìn vào giá trị được lưu cuối cùng, bởi vì nó có thể là ngón tay đầu tiên mà tôi nâng lên.

Làm cách nào tôi có thể truy xuất tọa độ chạm trong các trường hợp này?

Answer 1

Trên touchstart bạn có thể lưu trữ tất cả các giá trị bạn có thể cần (như x, y, mục tiêu, v.v.). Trên touchend bạn có thể truy xuất tất cả các giá trị được lưu trữ nhờ giá trị Touch.identifier phải là giá trị duy nhất cho mỗi lần chạm.

Tôi đã tạo ra một bằng chứng của khái niệm ở đây: http://jsbin.com/adifit/3/

Đoạn code dưới đây theo dõi x và y vị trí duy nhất, nhưng bạn có thể theo dõi bất kỳ thuộc tính nếu bạn cần.

Ý tưởng đằng sau mã là:

1. trên touchstart tạo một đối tượng và lưu trữ tất cả các dữ liệu bên trong (bao gồm ID touch)
2. cửa hàng đối tượng này trong mảng
3. trên touchend kiểm tra các id của liên lạc và cố gắng tìm đối tượng tương ứng trong mảng
4. nếu tìm thấy chúng tôi đã hoàn tất.

Và mã:

var touches = []; 
var cons; 

$(init); 

function init() 
{ 
    cons = $("#console"); 
    document.getElementById("area").addEventListener("touchstart", onTouchStart); 
    document.addEventListener("touchend", onTouchEnd); 
    document.addEventListener("touchcancel", onTouchEnd); 
} 

function onTouchStart(e) 
{ 
    e.preventDefault(); 
    var touchList = e.changedTouches; 
    var touch; 
    for(var i = 0; i < touchList.length; i++) 
    { 
    cons.html(cons.html() + "startX: " + touchList[i].screenX + ", id: " + touchList[i].identifier + "<br/>"); 
    touch = {x: touchList[i].screenX, y: touchList[i].screenY, id: touchList[i].identifier}; 
    touches.push(touch); 
    } 
} 

function onTouchEnd(e) 
{ 
    cons.html(cons.html() + "<strong>TouchEnd:</strong><br/>"); 
    var touchList = e.changedTouches; 
    var touch; 
    for(var i = 0; i < touchList.length; i++) 
    { 
    touch = {x: touchList[i].screenX, y: touchList[i].screenY, id: touchList[i].identifier}; 
    for (var j = touches.length - 1; j >= 0 ; j--) 
    { 
     if (touches[j].id == touch.id) 
     { 
     cons.html(cons.html() + "<strong>startX: "+ touches[j].x+ ", id: " + touchList[i].identifier + "</strong><br/>"); 
     touches.splice(j, 1); 
     } 
    } 
    } 
} 

Đoạn mã trên sử dụng jQuery, nhưng nó chỉ được sử dụng để tiện hiển thị kết quả trên màn hình, jQuery không được sử dụng cho bất cứ điều gì khác.

Answer 2

Các sự kiện touch khác nhau có thể được kết nối máng event.target.

W3C specs on touchmove event:

Mục tiêu của sự kiện này phải Element cùng đã nhận được sự kiện touchstart khi điểm tiếp xúc này đã được đặt trên bề mặt, ngay cả khi các điểm tiếp xúc đã kể từ khi chuyển ngoài khu vực tương tác của phần tử mục tiêu.

Vì vậy, bạn theo dõi các event.target:

document.addEventListener("touchstart", onTouchStart); 
document.addEventListener("touchend", onTouchEnd); 
document.addEventListener("touchcancel", onTouchCancel); 

var targets = []; // create array with all touch targets 
        // still needs some sort of garbage collection though 

function onTouchStart(event){ 
    targets.push(event.target); // add target to array 
} 

function onTouchEnd(event){ 
    // loop through array to find your target 
    for (var i = 0; i < targets.length; i++) { 
     if (targets[i] == event.target) { //test target 
      // this is your match! Do something with this element 
      targets[i].splice(i,1); // remove entry after event ends; 
     } 
    } 
} 

function onTouchCancel(event){ 
    // loop through array to find your target 
    for (var i = 0; i < targets.length; i++) { 
     if (targets[i] == event.target) { //test target 
      // Just delete this event 
      targets[i].splice(i,1); // remove entry after event ends; 
     } 
    } 
} 

LƯU Ý: không được kiểm tra. Tôi thấy rằng @Strah có một giải pháp tốt, tôi là một chút đơn giản và chỉ kiểm tra event.target, không phải là touch-id. Nhưng nó thể hiện một khái niệm tương tự.