元素
元素
工具
博客
问答

touchend 事件在移动端不触发是怎么回事？

UI恒宇 阅读 31
移动

我在做一个滑动切换图片的功能，监听了 touchstart 和 touchmove，但 touchend 好像经常没反应，尤其是在快速滑动后松手的时候。

我试过给元素加了 touch-action: none，也确保没有调用 preventDefault()，但还是不行。代码大概是这样：

element.addEventListener('touchstart', handleStart);
element.addEventListener('touchmove', handleMove);
element.addEventListener('touchend', () => {
  console.log('touchend fired');
});

有时候 log 根本不打印，是浏览器的问题还是我漏了什么？

TouchEnd触摸事件
我来解答 赞 6 收藏
二维码
手机扫码查看
反馈
2 条解答
诸葛景叶
诸葛景叶 Lv1
处理 touchend 事件不触发的问题，确实有时候会让人抓狂。你已经做了不少检查，比如设置了 touch-action: none 并且确保没有调用 preventDefault()，这都是正确的步骤。不过，还有一些建议可以试试。

首先，确保你的元素能够正确接收 touch 事件。有时候 CSS 样式或者父元素的影响会导致事件被拦截。检查一下是否有其他样式可能干扰，比如 pointer-events 设置为 none 或者其他类似的情况。

其次，考虑一下事件的绑定时机。确保在 DOM 完全加载后再添加事件监听器，可以在 window.onload 里做这件事，或者使用 document.addEventListener('DOMContentLoaded', ...)。

最后，看看是不是浏览器的默认行为在捣乱。即使你没有显式调用 preventDefault()，某些情况下浏览器可能会自动调用它，特别是在处理滚动或者缩放时。尝试在 touchstart 和 touchmove 中明确地调用 preventDefault() 来阻止默认行为，尽管这通常不是推荐的做法，但在调试过程中可以作为一个测试手段。

标准写法下，确保事件对象被正确传递和处理，可以在 touchend 的回调中打印 event 对象，看看有没有异常信息。以下是修改后的代码示例：

window.onload = function() {

  var element = document.getElementById('yourElementId');

  element.addEventListener('touchstart', handleStart);

  element.addEventListener('touchmove', handleMove);

  element.addEventListener('touchend', function(event) {

    console.log('touchend fired');

    console.log(event);

  });

};



function handleStart(event) {

  // 处理 touchstart 逻辑

}



function handleMove(event) {

  // 处理 touchmove 逻辑

}


注意替换 'yourElementId' 为你实际的元素 ID。通过这些步骤，应该能更好地排查和解决问题。希望这些建议对你有帮助。
点赞
2026-03-22 10:07
Code°艳苹
Code°艳苹 Lv1
这个问题听起来像是移动端浏览器对触摸事件处理的一个坑。首先，确保你的元素没有被其他元素遮挡或者设置了 pointer-events: none 这样的样式，这会导致事件无法正确触发。

其次，虽然你提到了 touch-action: none 和没有调用 preventDefault()，但有时候这些设置可能不够。可以尝试在 touchstart 事件里调用 event.preventDefault() 来阻止默认行为，这样有时候能确保 touchend 能正常触发。不过这个方法可能会带来滚动等问题，需要权衡利弊。

另外，检查一下是否有其他的 JavaScript 错误或者异常抛出，这些也可能导致 touchend 事件没有被执行。可以在控制台看看有没有报错信息。

最后，如果以上方法都不行，可能是浏览器自身的 bug 或者一些特殊行为导致的。这种情况下，可以尝试换一个浏览器测试，或者简化代码，逐步排查问题所在。

代码方面，你可以先试试在 touchstart 里面加个 preventDefault：

element.addEventListener('touchstart', (event) => {

  event.preventDefault();

  handleStart(event);

});

element.addEventListener('touchmove', handleMove);

element.addEventListener('touchend', () => {

  console.log('touchend fired');

});


注意这个可能会有副作用，比如禁用了滚动，需要根据实际情况调整。
点赞
2026-03-20 23:12
相关推荐
元素
元素
工具
博客
问答
登录/注册