26

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

似乎我想为此使用 touchmove 事件，但据我所知，目标元素永远不会改变，即使你四处拖动也是如此。clientX 和 clientY 确实发生了变化，我发现这个document.elementFromPoint功能在 chrome 中有效，但似乎很迂回（另外我不确定哪些浏览器支持它）

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

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

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

编辑：mouseenter我在这里 找到了一个想法，如何在 touchmove 上检测 html 元素并让它在桌面 chrome 上工作，但不能在移动 safari 上工作。

4

3 回答 3

25

我采取了不同的方法：

每个触摸事件我都会检查触摸位置是否在$('.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你想要支持的浏览器的支持。

于 2012-09-12T22:34:03.373 回答
2

你会在这个小提琴中找到我的解决方案，我在我的 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');
         }
      }
   });
});
于 2012-09-13T12:08:35.563 回答
1

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

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

于 2012-09-12T23:15:22.470 回答