在touchmove期间交叉到新元素
我想这样做，当你将手指拖过一组元素时，你手指上的那个背景会发生变化。
好像我想为此使用touchmove事件，但据我所知，目标元素永远不会改变，即使你拖动也是如此。 clientX和clientY确实发生了变化，我发现这个document.elementFromPoint函数在chrome中工作，但看起来非常迂回（加上我不确定哪些浏览器支持它）
看到这个小提琴，我希望盒子在你触摸它们时变成绿色：
http://jsfiddle.net/QcQYa/9/
顺便说一句，在chrome中，您需要进入检查器配置模式的用户代理选项卡，然后选择“模拟触摸事件”以查看我的示例。
编辑：我发现在这里使用mouseenter的想法如何检测touchmove上的html元素并让它在桌面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'); } }); }
你可以看到它在jsFiddle上工作。
它适用于Chrome，我希望它也适用于移动设备。
编辑 ：
在这个小提琴中，我使用了两个版本，我和评论中的链接（ document.elementFromPoint – 一个jQuery解决方案 ），这两个版本似乎都可以在我的Android手机上运行。 我还添加了一个快速而又脏的基准测试（请参阅控制台），并且正如预期的那样document.elementFromPoint快了几千分之一，如果您担心这一点，则应检查document.elementFromPoint对您要支持的浏览器的支持。
你会在这个小提琴中找到我的解决方案，我在我的Android手机上测试它并且工作正常，它使用jquerymobile来利用vmousemove事件，它还touchmove一个处理程序到touchmove事件只是为了防止在移动设备上滚动浏览器视图设备。
我在这里粘贴相关的HTML和javascript位：
One Two Three Four Five Six Seven
现在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'); } } }); });
你不能“触发touchend事件”或取消触摸，你需要开始触摸另一个。
所以你最好将touchmove事件绑定到容器，并根据它们的位置/大小和触摸位置来操作盒子，就像Dan Lee的答案所做的那样。