Làm thế nào để có được touchEnd để cư xử giống như mouseUp?

Question

Trên mouseUp hoặc touchEnd Tôi muốn nhận tham chiếu về yếu tố mà sự kiện đó đã xảy ra.

Demo

Trong ví dụ này, bạn cần phải bấm vào một yếu tố, kéo chuột và phát hành trên các yếu tố khác. Khi chuột được nhả, nền của phần tử đó sẽ chuyển thành màu đỏ. Mã của tôi hoạt động chính xác cho các sự kiện chuột, nhưng không hoạt động trên các thiết bị cảm ứng.

Khi touchStart ở trên một phần tử và ngón tay được giải phóng trên phần tử khác, tôi chỉ nhận được tham chiếu đến phần tử đầu tiên.

Điều tôi cần thay đổi để làm cho sự kiện chạm hoạt động chính xác như sự kiện chuột?

var isMouseDown = false;  


var panel1 = document.getElementById('panel1'); 
var panel2 = document.getElementById('panel2'); 

panel1.onmousedown = onDocumentMouseDown; 
panel1.onmouseup = onDocumentMouseUp; 
panel1.onmousemove = onDocumentMouseMove; 
panel1.addEventListener('touchstart', onDocumentTouchStart, false); 
panel1.addEventListener('touchmove', onDocumentTouchMove, false); 
panel1.addEventListener('touchend', onDocumentTouchEnd, false); 

panel2.onmousedown = onDocumentMouseDown; 
panel2.onmouseup = onDocumentMouseUp; 
panel2.onmousemove = onDocumentMouseMove; 
panel2.addEventListener('touchstart', onDocumentTouchStart, false); 
panel2.addEventListener('touchmove', onDocumentTouchMove, false); 
panel2.addEventListener('touchend', onDocumentTouchEnd, false); 



function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    panel1.style.background="#2E442E"; 
    panel2.style.background="#5D855C";  
} 

function onDocumentMouseUp(event) { 
    event.preventDefault(); 
    this.style.background="#ff0000"; 
} 

function onDocumentMouseMove(event) { 

} 

function onDocumentTouchStart(event) { 
    event.preventDefault(); 
    panel1.style.background="#2E442E"; 
    panel2.style.background="#5D855C"; 

} 

function onDocumentTouchMove(event) {  

} 

function onDocumentTouchEnd(event) { 
    event.preventDefault();   
    this.style.background="#ff0000";   

} 

Answer 1

Đây là một câu hỏi thú vị để giải quyết. Cảm ơn vì điều đó. Đây là những gì tôi đã làm. Tôi đã sửa đổi handler touchmove của bạn như vậy:

function onDocumentTouchMove(event) { 
    onDocumentTouchMove.x = event.changedTouches[event.changedTouches.length - 1].clientX; 
    onDocumentTouchMove.y = event.changedTouches[event.changedTouches.length - 1].clientY; 
} 

Trong handler này tôi tiết kiệm cuối cùng phối hợp mà người dùng chuyển đến. Trong tất cả các xác suất, đây là điểm mà tại đó người dùng lấy ngón tay, mũi, ngón tay, bút stylus, vv trên bề mặt cảm ứng. Những điều phối sau đó tôi sử dụng trong trình xử lý cho touchend để tìm phần tử bao quanh chúng.

function onDocumentTouchEnd(event) { 
    event.preventDefault(); 
    var elem = document.elementFromPoint(onDocumentTouchMove.x, onDocumentTouchMove.y); 
    elem.style.background = "#ff0000"; 
} 

Tôi đã sử dụng document.elementFromPoint(mdn link) cho mục đích này. Nó là một trong những phương pháp vàng nhưng khá chưa được cung cấp cho chúng tôi bởi CSSOM spec.

Đây là fiddle.

Answer 2

Có lẽ nếu bạn có thể bao gồm jQuery vào chương trình của bạn, bạn có thể làm một cái gì đó như thế này:

$('#itemId').on('touchEnd',function(){ this.trigger('mouseUp') }); 

Tôi không chắc chắn nếu jQuery out of the box hỗ trợ sự kiện này, nhưng bạn luôn có thể hãy thử jQuery movil, hy vọng nó đã giúp

Answer 3

Từ những gì có vẻ, đây là hành vi dự định cho các sự kiện chạm. Tuy nhiên, tôi có một cách giải quyết!

Tôi chưa thử nghiệm rộng rãi, nhưng dường như hoạt động trên Safari trên thiết bị di động cho ít nhất touchStart và touchEnd sự kiện.

Về cơ bản những gì chúng ta sẽ làm là nắm bắt tất cả các sự kiện liên lạc trên tài liệu khi chúng ở trong giai đoạn bắt giữ (xem http://www.w3.org/TR/DOM-Level-3-Events/). Trình xử lý cho các sự kiện này sẽ tìm phần tử DOM tại vị trí này và gửi lại sự kiện với mục tiêu "đúng".

Dường như vị trí của touchEnd sự kiện không được xác định rõ, vì vậy tôi phải truy vấn mảng changedEvents để có được vị trí được chạm cuối cùng. Tôi không chắc chắn nếu điều này làm việc như-là cho touchMove sự kiện et al.

function rerouteTouch (evt) { 
    if (evt.passthrough) { // Ignore if already rerouted 
     return; 
    } 
    evt.stopPropagation(); 
    var newevt = document.createEvent('TouchEvent'); 
    newevt.initTouchEvent (
     evt.type, 
     evt.bubbles, 
     evt.cancelable, 
     evt.view, 
     evt.detail, 
     evt.screenX, 
     evt.screenY, 
     evt.clientX, 
     evt.clientY, 
     evt.ctrlKey, 
     evt.altKey, 
     evt.shiftKey, 
     evt.metaKey, 
     evt.touches, 
     evt.targetTouches, 
     evt.changedTouches, 
     evt.scale, 
     evt.rotation); 
    newevt.passthrough = true; // Only reroute once 

    var target; 
    var x = (evt.type === 'touchend') ? evt.changedTouches[0].pageX : evt.pageX; 
    var y = (evt.type === 'touchend') ? evt.changedTouches[0].pageY : evt.pageY; 

    if (document !== (target = document.elementFromPoint(x, y))) { 
     target.dispatchEvent(newevt); 
    } 
} 

document.addEventListener('touchstart', rerouteTouch, true); // Third arg is true to indicate capture-phase 
document.addEventListener('touchend', rerouteTouch, true); 

... 

// Your event handlers here 

Dưới đây là một jsfiddle trong đó hoạt động như mong đợi trên safari di động cho tôi: http://jsfiddle.net/DREer/12/