2014-11-04 25 views
8

कुछ घटना श्रोताओं से शुरू:टच इवेंट ट्रिगर कैसे करें?

window.addEventListener('scroll', function (e) { 
    console.log('scroll', e); 
}); 
window.addEventListener('touchstart', function (e) { 
    console.log('touchstart', e); 
}); 
window.addEventListener('touchmove', function (e) { 
    console.log('touchmove', e); 
}); 
window.addEventListener('touchend', function (e) { 
    console.log('touchend', e); 
}); 

मैं प्रोग्राम के रूप में, दस्तावेज़ को छूने के लिए स्थिति {pageX: 0, pageY: 0} में {pageX: 0, pageY: 100} पर ले जाते हैं और स्पर्श घटना अंत की जरूरत है।

ऐसा करने के लिए, मैं एक सहायक समारोह TouchEvent कि निर्दिष्ट तत्व पर स्पर्श घटना को ट्रिगर किया जाएगा निर्माण करने के लिए जा रहा हूँ।

/** 
* @see https://gist.github.com/sstephenson/448808 
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html 
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event 
*/ 
function touchEvent (element, type, identifier, pageX, pageY) { 
    var e, 
     touch, 
     touches, 
     targetTouches, 
     changedTouches; 

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY); 

    if (type == 'touchend') { 
     touches = document.createTouchList(); 
     targetTouches = document.createTouchList(); 
     changedTouches = document.createTouchList(touch); 
    } else { 
     touches = document.createTouchList(touch); 
     targetTouches = document.createTouchList(touch); 
     changedTouches = document.createTouchList(touch); 
    } 

    e = document.createEvent('TouchEvent'); 
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0); 

    window.dispatchEvent(e); 
}; 

मुझे यकीन है कि दस्तावेज़ लोड और स्पर्श की घटनाओं पहले सहमति परिदृश्य का प्रतिनिधित्व प्रेषण है बनाने के लिए जा रहा हूँ।

document.addEventListener('DOMContentLoaded', function() { 
    var identifier = new Date().getTime(), 
     element = document, 
     i = 0; 

    touchEvent(element, 'touchstart', identifier, 0, 0); 
    while (i++ < 100) { 
     touchEvent(element, 'touchmove', identifier, 0, i); 
    } 
    touchEvent(element, 'touchend', identifier, 0, i); 
}); 
उम्मीद

कि touchstart, touchmove और touchend ईवेंट के कारण किया गया है। अप्रत्याशित कि scroll ईवेंट को ट्रिगर नहीं किया गया है और वास्तविक दस्तावेज़ के "छू" वर्तमान दस्तावेज़ में प्रतिबिंबित नहीं होता है।

window.addEventListener('scroll', function (e) { 
 
    console.log('scroll', e); 
 
}); 
 
window.addEventListener('resize', function (e) { 
 
    console.log('resize', e); 
 
}); 
 
window.addEventListener('touchstart', function (e) { 
 
    console.log('touchstart', e); 
 
}); 
 
window.addEventListener('touchmove', function (e) { 
 
    console.log('touchmove', e); 
 
}); 
 
window.addEventListener('touchend', function (e) { 
 
    console.log('touchend', e); 
 
}); 
 

 
/** 
 
* @see https://gist.github.com/sstephenson/448808 
 
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html 
 
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event 
 
*/ 
 
function touchEvent (element, type, identifier, pageX, pageY) { 
 
    var e, 
 
     touch, 
 
     touches, 
 
     targetTouches, 
 
     changedTouches; 
 
    
 
    if (!document.createTouch) { 
 
     throw new Error('This will work only in Safari browser.'); 
 
    } 
 

 
    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY); 
 
    
 
    if (type == 'touchend') { 
 
     touches = document.createTouchList(); 
 
     targetTouches = document.createTouchList(); 
 
     changedTouches = document.createTouchList(touch); 
 
    } else { 
 
     touches = document.createTouchList(touch); 
 
     targetTouches = document.createTouchList(touch); 
 
     changedTouches = document.createTouchList(touch); 
 
    } 
 

 
    e = document.createEvent('TouchEvent'); 
 
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0); 
 

 
    window.dispatchEvent(e); 
 
}; 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    var identifier = new Date().getTime(), 
 
     element = document, 
 
     i = 0; 
 

 
    touchEvent(element, 'touchstart', identifier, 0, 0); 
 
    while (i++ < 100) { 
 
     touchEvent(element, 'touchmove', identifier, 0, i); 
 
    } 
 
    touchEvent(element, 'touchend', identifier, 0, i); 
 
});
#playground { 
 
    background: #999; height: 5000px; 
 
}
<div id="playground"></div>

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

+0

document.createTouch() [पदावनत] है (https://developer.mozilla.org/en-US/docs/Web/API/Document/createTouch)। अब आपको [टच] (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) इंटरफ़ेस का उपयोग करने के लिए है। लगता है कि चुड़ैल प्रसिद्ध ब्राउज़र में पहले ही लागू नहीं किया जा रहा है। –

उत्तर

0

मुझे यकीन है कि अगर मैं अपने सवाल का सही ढंग से समझ नहीं कर रहा हूँ, लेकिन अगर आप पेज के शीर्ष पर स्पर्श शुरू करने और नीचे खींचें आप शीर्ष पर पेज स्क्रॉल करने के लिए कोशिश कर रहे हैं और यह पहले से ही वहाँ तो क्यों स्क्रॉल ट्रिगर चाहिए। शायद {pageX: 0, pageY: 100} पर स्थिति शुरू करें और {pageX: 0, pageY: 0} पर समाप्त करें और फिर देखें कि यह अभी भी काम नहीं कर रहा है।

सादर, के.जे.।

संबंधित मुद्दे