如何检测<body>标签内的触摸或点击事件？解决移动端触摸不触发问题

我来帮你搞定这个移动端触摸不生效的问题～ 你原来的脚本只监听了桌面端的click事件，而移动端的触摸操作需要专门监听触摸类事件，同时还要注意避免事件冲突和延迟。

问题分析 #

移动端的触摸操作不会触发原生的click事件（或者会有300ms延迟），所以直接绑定click事件在移动端无法正常响应。我们需要同时监听触摸事件（比如touchend）和click事件，来覆盖桌面和移动端的场景。另外你原来的侧边栏选择器$('mySidenav')应该是漏了符号，需要补全成#mySidenav（如果是id）或者.mySidenav（如果是类），否则无法选中元素哦。

修改后的代码 #

// 同时绑定click和touchend事件，兼容桌面和移动端
$(window).on('click touchend', function() {
  closeSideBar();
});

// 注意补全选择器，这里假设侧边栏的id是mySidenav
$('#mySidenav').on('click touchend', function(event) {
  // 阻止事件冒泡，避免触摸/点击侧边栏时关闭它
  event.stopPropagation();
  // 可选：阻止触摸事件的默认行为，消除移动端300ms点击延迟，避免重复触发
  event.preventDefault();
});

关键说明 #

• 使用on()方法绑定多个事件：这样不管是桌面端的鼠标点击，还是移动端的触摸抬起操作，都能触发closeSideBar()函数
• 侧边栏也要同时监听两个事件：确保触摸侧边栏时同样能阻止事件冒泡，不会误触发关闭逻辑
• 加上event.preventDefault()：可以取消触摸事件的默认行为，避免移动端的300ms延迟，也防止同一操作同时触发touchend和click两次事件

如果你的侧边栏是类选择器，记得把#mySidenav改成.mySidenav就好啦～

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