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

Trigger touch events on mobile web

本文关键字：触摸 事件 移动 移动网 网络      更新时间：2023-09-26

我正在尝试弄清楚如何在移动浏览器中触发触摸事件以进行测试。我不是网络开发人员，所以这对我来说有点陌生。

此时，我

正在尝试捕获由我触摸屏幕创建的实际触摸事件，并重新触发它们以触发相同的响应。以下是我在移动 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

您只存储touchend事件之一，但很可能需要多个事件才能正确模拟手指轻扫。例如，在移动设备中打开此演示。

您将看到滑动滚动的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>

相关文章：