Làm cách nào để kích hoạt sự kiện cảm ứng?

Question

Hãy bắt đầu với một số người nghe sự kiện:

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); 
}); 

tôi cần phải lập trình chạm vào tài liệu ở vị trí {pageX: 0, pageY: 0}, di chuyển nó đến {pageX: 0, pageY: 100} và kết thúc sự kiện liên lạc.

Để thực hiện việc này, tôi sẽ xây dựng hàm trợ giúp TouchEvent sẽ kích hoạt sự kiện chạm trên phần tử được chỉ định.

/** 
* @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); 
}; 

Tôi sẽ đảm bảo rằng tài liệu được tải và gửi các sự kiện liên lạc đại diện cho kịch bản đã thỏa thuận trước đó.

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); 
}); 

Các dự kiến ​​là touchstart, touchmove và touchend sự kiện này đã được kích hoạt. Điều bất ngờ là sự kiện scroll chưa được kích hoạt và "chạm" thực tế của tài liệu không được phản ánh trong tài liệu hiện tại.

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>

là gì thiết lập của tôi thiếu để làm cho trình duyệt giải thích các sự kiện liên lạc, nếu như những người được cấp bởi người dùng cuối? Về bản chất, tôi hy vọng trình duyệt sẽ cuộn để phản hồi lại chuỗi các sự kiện bắt đầu, di chuyển và kết thúc được kích hoạt theo chương trình.

Answer 1

Tôi không chắc liệu tôi có hiểu chính xác câu hỏi của bạn hay không, nhưng nếu bạn bắt đầu chạm vào đầu trang và kéo xuống, bạn đang cố gắng cuộn trang lên trên cùng và nó đã ở đó vậy tại sao trình kích hoạt cuộn. Có thể bắt đầu tại vị trí {pageX: 0, pageY: 100} và kết thúc tại {pageX: 0, pageY: 0} và sau đó xem nếu nó vẫn không hoạt động.

Kính trọng, KJ.