Question

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

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

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

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

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

修改我发现在这里使用mouseenter How to detect html elements on touchmove并使其适用于桌面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，我希望它也适用于移动设备。

修改：
在this fiddle我使用了两个版本，我和评论中的链接中的那个版本（document.elementFromPoint – a jQuery solution），这两个版本似乎都适用于我的Android手机。我还添加了一个快速而又脏的基准测试（请参阅控制台），并且按预期document.elementFromPoint快了几千分之一，如果您担心这一点，则应检查document.elementFromPoint对您要支持的浏览器的支持。

Answer 2

你会在this fiddle找到我的解决方案，我在我的Android手机上测试它并且工作正常，它使用jquerymobile来利用vmousemove事件，它还附加一个处理程序到{{ 1}}事件只是为了防止在移动设备上滚动浏览器视图。

我在这里粘贴相关的HTML和javascript位：

touchmove

现在是javascript：

<div id="main" ontouchmove="touchMove(event);">
   <span class='catch'>One</span>
   <span class='catch'>Two</span>
   <span class='catch'>Three</span>
   <span class='catch'>Four</span>
   <span class='catch'>Five</span>
   <span class='catch'>Six</span>
   <span class='catch'>Seven</span>
</div>

Answer 3

你不能“触发touchend事件”或取消触摸，你需要开始触摸另一个。

因此，您最好将touchmove事件绑定到容器，并根据其位置/大小和触摸位置操作这些框，就像Dan Lee的回答中的那些部分一样。

在touchmove期间交叉到新元素

3 个答案: