모바일 웹에서 터치 이벤트 트리거

Question

테스트 목적으로 모바일 브라우저에서 터치 이벤트를 트리거하는 방법을 파악하려고합니다. 나는 웹 개발자가 아니기 때문에 이것은 나에게 익숙하지 않은 영토이다.

이 시점에서 나는 화면을 터치하고 동일한 응답을 트리거하기 위해 다시 발사 한 실제 터치 이벤트를 캡처하려고합니다. 아래는 내가 실제로 amazon.com 페이지에서하는 일입니다. 슬라이딩을 반복하기를 원하는 컨베이어가 실제로 손가락으로 미끄러지는 것처럼 말입니다. 그러나 회전 목마는 미끄러지지 않습니다. 브라우저가 내 재발행 된 이벤트를 원래 이벤트와 다르게 처리하는 것 같습니다. Android에서 Chrome에서이 작업을 실행하고 있습니다.

누구든지이 동작을 보았고 무엇을 해결해야합니까?

// EDITED after taking into consideration @Palpatim's suggestion 
// stash away events on a carousel 
var element = document.querySelector('.gw-carousel-viewport'); 
document.test_touch_move = [] 
element.addEventListener('touchstart', function(e){document.test_touch_start = e;}, false); 
element.addEventListener('touchmove', function(e){document.test_touch_move.push(e);}, false); 
element.addEventListener('touchend', function(e){document.test_touch_end = e;}, false); 

// 
// physically slide the carousel with my finder to trigger events 
// 

// store captured events from being overriden 
var touch_start = document.test_touch_start; 
var touch_move = document.test_touch_move; 
var touch_end = document.test_touch_end; 

// 
// physically slide the carousel back to its initial position to make sure all event screen coordinates match 
// 

element.dispatchEvent(touch_start); 
touch_move.forEach(function(e){element.dispatchEvent(e);}); 
element.dispatchEvent(touch_end); 

// I do not see the same sliding behavior as I see when actually swiping with my finger 

Answer 1

경우에만 touchend 이벤트 중 하나를 저장하고 있지만, 모든 가능성에, 당신은 제대로 손가락을 슬쩍을 에뮬레이트하는 여러 이벤트가 필요합니다. 예를 들어 휴대 기기에서 this demo을여십시오.

스크롤 div를 스 와이프하면 여러 touchmove 이벤트가 기록되고 페이지 주위를 이동할 때 손가락을 추적합니다.

var log = document.getElementById('log'); 
 

 
var logEvent = function(ev) { 
 
    var d = new Date(); 
 
    var msg = document.createTextNode(d.getTime() + ' :: received ' + ev.type + '\n'); 
 
    log.appendChild(msg); 
 
}; 
 

 
// stash away events on a carousel 
 
var element = document.getElementById('listener'); 
 
element.addEventListener('touchstart', logEvent, false); 
 
element.addEventListener('touchmove', logEvent, false); 
 
element.addEventListener('touchend', logEvent, false);

#log, 
 
#listener { 
 
    width: 40%; 
 
    position: absolute; 
 
    top: 5%; 
 
    bottom: 5%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
#listener { 
 
    padding: 0 2%; 
 
    border: 1px solid green; 
 
    left: 2%; 
 
} 
 

 
#log { 
 
    border: 1px solid blue; 
 
    right: 2%; 
 
}

<div id="listener"> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    <p>I am a long scrolling div.</p> 
 
    </div> 
 
    
 
    <pre id="log"></pre>