在移动网络上触发触摸事件

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>