javascript - 交叉在 touchmove 元素

  显示原文与译文双语对照的内容
0 0

我想让它,以便在拖动手指通过一套的背景元素有一个你有手指上更改。

好像我想使用touchmove事件来参加,但就我所能告诉目标元素从不更改,甚至为四周拖动。 clientX和clientY做更改,然后找到这个 document.elementFromPoint函数,该函数能在chrome,而间接似乎很( 而且我不知道哪些浏览器支持它)

请参见这菜,我想让这两个框变为绿色,你身体很好的浏览:

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

顺便说一下,在chrome中,你需要进入的用户代理选项卡的inspector config模式,然后选择" 模拟Touch事件" 查看我的示例。

EDIT : 这里我发现一个办法使用mouseenter [ http://stackoverflow .com/questions/8614711/how检测html元素上touchmoverq=1]桌面chrome上,找到了工作,但不能在mobile safari 。?

时间:原作者:4个回答

0 0

我采用了不同的方法:

每触摸事件我检查触摸位置是否在里面 $('.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,我希望它也将在移动设备上。

EDit
此拉提琴 我曾经和两个版本,并且来自中的链接注释( 文档.elementFromPoint – JQuery解决方案 ),两者似乎研究研究Android电话。 我还添加了一个快速但粗糙的基准测试( 请参见控制台) 之后按预期 document.elementFromPoint应该检查这几个千分更快,如果那是你应该关心的支持 document.elementFromPoint浏览器要支持的。

原作者:
0 0

你会发现我的解决方案中 此拉提琴,我测试我的android手机上然后还能动,它使用jquerymobile来利用 vmousemove事件,还attachs处理程序 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>

现在java script :

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');
         }
      }
   });
});
原作者:
0 0

你不能" " 或取消触摸触发touchend事件,你将需要开始接触到另一个位置。

所以你好看看touchmove事件绑定到容器,并操作框根据其position/sizes和触摸位置,就像哪一部分Dan Lee回答应对。

原作者:
...