在touchmove期间交叉到新元素

Question

我想这样做,当你将手指拖过一组元素时,你手指上的那个背景会发生变化.

看起来我想要使用touchmove事件,但据我所知,目标元素永远不会改变,即使你拖动.clientX和clientY确实发生了变化,我发现这个document.elementFromPoint功能在chrome中运行,但看起来非常迂回(加上我不确定哪些浏览器支持它)

看到这个小提琴,我希望盒子在你触摸它们时变成绿色:

http://jsfiddle.net/QcQYa/9/

顺便说一句,在chrome中,您需要进入检查器配置模式的用户代理选项卡,然后选择"模拟触摸事件"以查看我的示例.

编辑: 我发现了一个mouseenter在这里使用的想法如何检测touchmove上的html元素,并让它在桌面chrome上工作,但不能在移动safari上工作.

Answer 1

我采取了不同的方法:

每次触摸事件我都会检查触摸位置是否在$('.catch')物体内.

function highlightHoveredObject(x, y) {
    $('.catch').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {

        $('.catch').removeClass('green');
        $(this).addClass('green');
      }
    });
}

你可以看到它在jsFiddle上工作.
它适用于Chrome,我希望它也适用于移动设备.

编辑:
在这个小提琴我使用了两个版本,我和评论中的链接(document.elementFromPoint - 一个jQuery解决方案),这两个版本似乎都在我的Android手机上工作.我还添加了一个快速而肮脏的基准测试(请参阅控制台),并且按预期document.elementFromPoint速度提高了几千分之一,如果您担心这一点,则应检查document.elementFromPoint您想要支持的浏览器的支持.