javascript 'touchstart','touchend','touchmove'添加到body中,检查元素是否为image

ao218c7q  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(118)

我们有一个用例,需要捕获触摸开始、结束和移动事件-但是,由于提要不断更新,我们不能一直将事件添加到提要中添加的每个div。因此,我们将事件侦听器添加到BODY本身。然而,尽管通常我会执行类似$(event.target).is("img")的操作,查看正在触摸/移动的目标是否是图像,当它附加到body或文档元素时,它似乎不起作用。
我希望避免将这个侦听器直接附加到要添加到提要的每个元素上,因为这会不必要地减慢速度;将其放在body/document级别要好得多,因为这样添加的任何项都将被处理,而不管它是何时添加的(因为侦听器位于顶级元素上)。
问题是,即使我使用currentTargettarget,甚至任何get位置或最接近的位置,它似乎永远不会返回它在图像上。
我很好奇你们对此有什么想法。

2ic8powd

2ic8powd1#

看来我终于能搞清楚了:

let changedTouch = event.changedTouches[0];
elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);

  if (elem.tagName === 'IMG') {
    ...do whatever...
  }

通过这种方式,我可以缩放图像,或者对它们做任何我想做的事情,即使它们是在用户向下滚动时添加到DOM中的,由系统动态添加的,甚至是删除和上移的。
还在研究一种方法,实际上重置图像回到它的原始状态,一旦做了哈哈,但嘿,至少这工作!

相关问题