为body绑定touchstart/touchend/touchmove事件后，无法检测img目标元素

开发者阿泽

2026-7-28

解决触摸事件委托到body时无法识别图片目标的问题

核心原因分析

你遇到的问题本质是触摸事件的实际触发目标并非img本身，常见场景包括：

img被外层容器（如span、div）包裹，触摸时事件目标指向了容器而非img
img上存在伪元素（::before/::after）或透明覆盖层，触摸事件被这些元素捕获
浏览器对触摸事件的目标解析逻辑与鼠标事件存在差异，导致jQuery的is("img")判断失效

解决思路&代码示例

1. 先确认实际触发的目标元素

先在事件回调里打印目标元素，搞清楚触摸到底命中了什么：

document.body.addEventListener('touchstart', function(event) {
  console.log('触摸目标:', event.target); // 查看控制台输出的具体元素
});

2. 改用更可靠的判断方式

方式一：直接判断标签名（原生DOM方法，精准稳定）

如果确认触摸目标就是img本身，直接用原生标签名判断，比jQuery的is()更可靠：

document.body.addEventListener('touchstart', function(event) {
  if (event.target.tagName.toLowerCase() === 'img') {
    // 执行图片触摸相关逻辑
    console.log('触摸到图片');
  }
});

方式二：用`closest()`查找最近的img（兼容嵌套/覆盖场景）

如果触摸目标是img的子元素（或覆盖在img上的其他元素），用closest()向上查找最近的img元素，能覆盖绝大多数场景：

// 原生JS版本
document.body.addEventListener('touchstart', function(event) {
  const targetImg = event.target.closest('img');
  if (targetImg) {
    // 执行图片触摸相关逻辑
    console.log('触摸到图片区域', targetImg);
  }
});

// jQuery版本
$('body').on('touchstart', function(event) {
  if ($(event.target).closest('img').length > 0) {
    // 执行图片触摸相关逻辑
    console.log('触摸到图片区域');
  }
});