माउसअप की तरह व्यवहार करने के लिए touchEnd कैसे प्राप्त करें?

Question

mouseUp या touchEnd पर मैं उस तत्व का संदर्भ प्राप्त करना चाहता हूं जिस पर यह घटना हुई थी।

Demo

इस उदाहरण में, आप एक ही तत्व, खींचें माउस और एक अन्य तत्व पर जारी किया गया पर क्लिक करने की जरूरत। जब माउस जारी किया जाता है, तो उस तत्व की पृष्ठभूमि लाल हो जाएगी। मेरा कोड माउस घटनाओं के लिए सही तरीके से काम करता है, लेकिन स्पर्श उपकरणों पर नहीं।

जब touchStart एक तत्व पर है और दूसरी तत्व पर उंगली जारी की गई है, तो मुझे केवल पहले तत्व का संदर्भ मिल रहा है।

स्पर्श घटनाओं को माउस घटनाओं की तरह बिल्कुल काम करने के लिए मुझे क्या बदलने की ज़रूरत है?

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

इस से निपटने के लिए एक मजेदार सवाल था:

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 

यहाँ एक jsfiddle जो मेरे लिए मोबाइल सफारी पर अपेक्षा के अनुरूप काम करता है। उसके लिए धन्यवाद। यहां मैंने जो किया है। मैं इस तरह के रूप में अपने touchmove हैंडलर को संशोधित किया है:

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

इस हैंडलर मैं पिछले समन्वय है कि उपयोगकर्ता के लिए ले जाया बचत कर रहा हूँ में। सभी संभावनाओं में, यह वह बिंदु है जिस पर उपयोगकर्ता ने अपनी उंगली, नाक, नाक, स्टाइलस, आदि स्पर्श सतह से बाहर ले लिया। इन समन्वयों के बाद मैं उनके आसपास के तत्व को खोजने के लिए touchend के लिए हैंडलर में उपयोग करता हूं।

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

मैं इस उद्देश्य के लिए document.elementFromPoint(mdn link) उपयोग किया है। यह CSSOM spec द्वारा हमें प्रदान की गई उन सुनहरे लेकिन अभी तक अज्ञात विधियों में से एक है।

यहां fiddle है।

Answer 2

शायद अगर आप अपने कार्यक्रम में शामिल कर सकते हैं jQuery आप कुछ इस तरह कर सकते हैं:

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

मुझे यकीन है कि अगर jQuery बॉक्स से बाहर इस घटनाओं का समर्थन करता है नहीं कर रहा हूँ, लेकिन आप हमेशा कर सकते हैं jQuery movil आज़माएं, उम्मीद है कि इससे

Answer 3

ऐसा लगता है कि यह स्पर्श घटनाओं के लिए व्यवहार है। हालांकि, मेरे पास एक कामकाज है!

मैंने इस बड़े पैमाने पर परीक्षण नहीं किया है, लेकिन ऐसा लगता है कि कम से कम touchStart और touchEnd ईवेंट के लिए मोबाइल सफारी पर काम करना प्रतीत होता है।

असल में हम जो करने जा रहे हैं वह दस्तावेज पर सभी स्पर्श घटनाओं को कैप्चर करता है क्योंकि वे कैप्चर-चरण में हैं (http://www.w3.org/TR/DOM-Level-3-Events/ देखें)। इन घटनाओं के लिए हैंडलर को इस स्थान पर डीओएम तत्व मिलेगा और ईवेंट को "सही" लक्ष्य के साथ दोबारा भेज दिया जाएगा।

ऐसा लगता है कि touchEnd घटनाओं की स्थिति अच्छी तरह परिभाषित नहीं है, इसलिए मुझे अंतिम छूने वाली स्थिति प्राप्त करने के लिए changedEvents सरणी से पूछना पड़ा। मुझे यकीन नहीं है कि यह touchMove ईवेंट एट अल के लिए काम करता है। http://jsfiddle.net/DREer/12/