Javascript 在触摸移动过程中切换到新元素

我想这样做，当你在一组元素上拖动你的手指时，你的手指所在元素的背景会发生变化

似乎我想使用touchmove事件来实现这一点，但据我所知，目标元素永远不会改变，即使在拖动的过程中也是如此。clientX和clientY确实发生了变化，我发现这个

document.elementFromPoint

函数在chrome中工作，但看起来非常迂回（另外我不确定哪些浏览器支持它）

看这把小提琴，我想让盒子在你触摸时变成绿色：

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

编辑：

---

我在这里找到了一个使用

mouseenter

的想法，并让它在桌面chrome上工作，但在移动safari上却不行

我采取了不同的方法：

每次触摸事件我都会检查触摸位置是否在

$（'.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');
      }
    });
}

函数高亮悬停对象（x，y）{
$（'.catch'）。每个（函数（）{
//检查是否在边界内
如果（(
x=$（this.offset（）.left+$（this.outerWidth（））||
y=$（this.offset（）.top+$（this.outerHeight（））
)) {
$（'.catch'）.removeClass（'green'）；
$（this.addClass（'green'）；
}
});
}

您可以看到它正在工作。
它适用于Chrome，我希望它也适用于移动设备

编辑：
在本例中，我使用了两个版本，我的版本和评论（）链接中的版本，这两个版本似乎都适用于我的Android手机。我还添加了一个快速而肮脏的基准测试（请参阅console）和预期的

文档。elementFromPoint

的速度要快几千分之一，如果这是您关心的问题，您应该检查

文档的支持情况。elementFromPoint

对于您想要支持的浏览器。

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

---

因此，您最好将touchmove事件绑定到容器，并根据盒子的位置/大小和触摸位置来操作盒子，就像Dan Lee的答案中所做的那样。

您可以在中找到我的解决方案，我在android手机上进行了测试，效果很好，它使用jquerymobile来利用

vmousemove

事件，它还向

touchmove

事件附加一个处理程序，以防止在移动设备上滚动浏览器视图

我在这里粘贴相关的HTML和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>

一个
两个
三
四
五
六
七

现在，javascript：

function elem_overlap(jqo, left, top) {
   var d = jqo.offset();
   return top >= d.top && left >= d.left && left <= (d.left+jqo[0].offsetWidth)
          && top <= (d.top+jqo[0].offsetHeight);
}

/* To prevent WebView from scrolling on swipe, see http://goo.gl/DIZbm */
touchMove = function(event) {
   event.preventDefault(); //Prevent scrolling on this element
}

$("#main").bind("vmousemove", function(evt){
   $('.catch').each(function(index) {
      if ( elem_overlap($(this), evt.pageX, evt.pageY) ) {
         $('.catch').not('eq('+index+')').removeClass('green');
         if (!$(this).hasClass('green')) {
            $(this).addClass('green');
         }
      }
   });
});

功能元素重叠（jqo，左，上）{
var d=jqo.offset（）；
return top>=d.top&&left>=d.left&&left您必须查看touchmove事件的坐标，并查看它们是否与html元素的坐标重叠。我必须为jquerymobile android游戏编写相同的代码，我家里没有，但明天可以查找并更新您的小提琴。似乎有效，介意吗了解这篇vs
文档。elementFromPoint
？当然，浏览器不兼容是最大的缺点。我找到了两篇文章，这可能是您非常感兴趣的：和。您还看到您必须计算当前视口。我不确定这是否适用于我的解决方案。对我来说，我的解决方案看起来不那么痛苦，但这取决于您选择什么我没有想到的是，你需要解决手机/平板电脑浏览器的问题。不幸的是，我不知道哪些手机浏览器支持
document.elementFromPoint
。但我认为如果它们都支持它们，性能会略有提高，因为内部功能恰好更快。谢谢你的额外建议。document.elementFromPoint在iOS上工作，但我将使用您的解决方案的修改版本。在我的手机上进行测试后，允许用户的手指在左右滑动时稍微在方框上方或下方移动是有意义的。例如，app store的ratings widget就可以做到这一点，它会让人感觉更好。我无法用
document.elementFromPoint
。感谢您提供了这个不同的解决方案。我还没有使用jquery mobile，但它似乎工作得很好。