在touchmove期间交叉到新元素 [英] Crossing over to new elements during touchmove

问题描述

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

I'd like to make it so that as you drag your finger over a set of elements, the background of the one you've got your finger on changes.

似乎我想为此使用touchmove事件，但据我所知，目标元素永远不会改变，即使你拖动也是如此。 clientX和clientY确实发生了变化，我发现这个 document.elementFromPoint 函数在chrome中工作，但看起来非常迂回（加上我不确定哪些浏览器支持它）

It seems like I want to use the touchmove event for this, but as far as I can tell the target element never changes, even as you drag around. The clientX and clientY do change, and I found this document.elementFromPoint function that works in chrome, but seems very roundabout (plus I'm not sure which browsers support it)

看到这个小提琴，我希望盒子在你触摸时变成绿色：

See this fiddle, I want the boxes to turn green as you touch through them:

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

顺便说一句，在chrome中，你需要进入检查员配置模式的用户代理选项卡，然后选择模拟触摸事件来查看我的示例。

修改：
我发现想要使用 mouseenter 这里如何检测touchmove上的html元素并让它在桌面Chrome上工作，但是不是在移动野生动物园。

I found an idea to use mouseenter here How to detect html elements on touchmove and got it to work on desktop chrome, but not on mobile safari.

推荐答案

我采取了不同的方法：

每一次触摸事件我检查触摸位置是否在 $（'。catch'）对象内。

Every touch event I check if the touch position is inside a $('.catch') object.

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，我希望它也适用于移动设备。

You can see it working on jsFiddle.
It works on Chrome, I hope it also does on mobile devices.

编辑：

这个小提琴 我使用了两个版本，我和评论中的链接中的那个版本（ document.elementFromPoint - 一个jQuery解决方案），两者似乎都可以在我的Android手机上运行。我还添加了一个快速而又脏的基准测试（参见控制台），并且正如预期的那样 document.elementFromPoint 快了几千分之一，如果你担心这个问题，你应该检查<$ c的支持c $ c> document.elementFromPoint 用于您要支持的浏览器。

Edit:
In this fiddle I used both versions, mine and that one from the link in the comments (document.elementFromPoint – a jQuery solution), both seem to work on my Android phone. I also added a quick and dirty benchmark (see console) and as expected document.elementFromPoint is a few thousandth faster, if that is your concern you should check the support of document.elementFromPoint for the browsers you want to support.

这篇关于在touchmove期间交叉到新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！