在移動網絡上觸發觸摸事件

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>