移动端网页能否程序化触发滑动？需模拟touchstart等触摸事件

完全可以通过构造并触发触摸事件序列来实现你需要的滑动效果，以下是两种可靠的实现方式：

1. 原生JavaScript构造触摸事件序列 #

直接模拟touchstart→touchmove→touchend的完整事件链，还原真实滑动的触发逻辑：

// 获取需要触发滑动的目标元素
const slider = document.querySelector('.target-slider');

// 定义滑动的起始/结束坐标（根据实际需求调整）
const startCoords = { x: 100, y: 200 };
const endCoords = { x: 300, y: 200 };

// 创建触摸点对象
function createTouchPoint(x, y) {
  return new Touch({
    identifier: Date.now(), // 唯一标识触摸点
    target: slider,
    clientX: x,
    clientY: y,
    screenX: x,
    screenY: y,
    pageX: x,
    pageY: y
  });
}

// 触发touchstart事件
const startTouch = createTouchPoint(startCoords.x, startCoords.y);
const startEvent = new TouchEvent('touchstart', {
  bubbles: true,
  cancelable: true,
  touches: [startTouch],
  targetTouches: [startTouch],
  changedTouches: [startTouch]
});
slider.dispatchEvent(startEvent);

// 模拟连续的touchmove事件（分多步触发，还原真实滑动的连续性）
const stepCount = 10; // 滑动拆分的步数，越多越平滑
const stepX = (endCoords.x - startCoords.x) / stepCount;
const stepY = (endCoords.y - startCoords.y) / stepCount;

for (let i = 1; i <= stepCount; i++) {
  setTimeout(() => {
    const currentX = startCoords.x + stepX * i;
    const currentY = startCoords.y + stepY * i;
    const moveTouch = createTouchPoint(currentX, currentY);
    const moveEvent = new TouchEvent('touchmove', {
      bubbles: true,
      cancelable: true,
      touches: [moveTouch],
      targetTouches: [moveTouch],
      changedTouches: [moveTouch]
    });
    slider.dispatchEvent(moveEvent);
  }, i * 20); // 每20ms触发一次，控制滑动速度
}

// 触发touchend事件，结束滑动
setTimeout(() => {
  const endTouch = createTouchPoint(endCoords.x, endCoords.y);
  const endEvent = new TouchEvent('touchend', {
    bubbles: true,
    cancelable: true,
    touches: [],
    targetTouches: [],
    changedTouches: [endTouch]
  });
  slider.dispatchEvent(endEvent);
}, (stepCount + 1) * 20);

2. 使用Pointer Events API（兼容更广泛） #

Pointer Events统一了触摸、鼠标等输入类型，代码更简洁，同时支持更多浏览器场景：

const slider = document.querySelector('.target-slider');

// 触发pointerdown（对应touchstart）
const downEvent = new PointerEvent('pointerdown', {
  bubbles: true,
  cancelable: true,
  clientX: 100,
  clientY: 200,
  pointerType: 'touch' // 指定为触摸输入类型
});
slider.dispatchEvent(downEvent);

// 模拟pointermove（对应touchmove）
const stepCount = 10;
const stepX = 20; // 每次滑动的距离
for (let i = 1; i <= stepCount; i++) {
  setTimeout(() => {
    const moveEvent = new PointerEvent('pointermove', {
      bubbles: true,
      cancelable: true,
      clientX: 100 + stepX * i,
      clientY: 200,
      pointerType: 'touch'
    });
    slider.dispatchEvent(moveEvent);
  }, i * 20);
}

// 触发pointerup（对应touchend）
setTimeout(() => {
  const upEvent = new PointerEvent('pointerup', {
    bubbles: true,
    cancelable: true,
    clientX: 300,
    clientY: 200,
    pointerType: 'touch'
  });
  slider.dispatchEvent(upEvent);
}, (stepCount + 1) * 20);

关键注意事项 #

• 若目标元素有touch-action CSS属性限制，需设置为touch-action: pan-x;或none，确保允许滑动操作。
• 事件必须开启bubbles和cancelable，否则无法被目标元素的事件监听器正常捕获。
• 分多步触发touchmove/pointermove是关键，单次移动事件可能无法触发组件的完整滑动逻辑（如轮播的惯性效果）。

内容的提问来源于stack exchange，提问作者Andrey Shostik