Question

我已经完成了建议的主题，但似乎之前没有发布过。最接近的是这个，但它需要知道坐标：Detect finger drag using Javascript on touch phones?

假设我有3 <div style='float: left'></div>对：

<div id='Adiv' style='float: left'>A</div>
<div id='Bdiv' style='float: left'>B</div>
<div id='Cdiv' style='float: left'>C</div>

而不是div上的onClick事件，我想检测用户如何与按钮交互。

例如，如果用户将手指放在A上，然后拖动到B然后拖动到C，我想输出：ABC

如果用户将手指放在B上，然后拖动到A然后拖动到C而不抬起，我想输出：BABC。

基本上我想检测一个手指是否已经移动/用手指划过DIV然后我想知道它。这甚至可能吗？

感谢您的指导。

p / s这适用于移动网络浏览器，顺便说一句。最好，

Answer 1

这有点棘手，因为你没有touchover事件或类似事件。

因此，解决方案是通过元素“coords”检测“触摸”。

用div包裹它们（例如）并听取他touchmove事件。
存放儿童的“坐标”（表演）。
在包装器上touchmove时，从事件中获取x,y值。
检查孩子中的哪些人符合这些价值观。

现在，代码

// first - store the coords of all the cells for the position check
var matrix = $('.wrapper div').map(function() {
  var e = $(this),
      o = e.offset(),
      w = e.width(),
      h = e.height();

  return {
    top: o.top,
    left: o.left,
    right: o.left + w,
    bottom: o.top + h,
    e: e
  }
}).get();

var currentTarget = $(),
    activeTarget = $();


var touchF = function(e) {
  var touch = e.originalEvent.touches[0];
  currentTarget = getCurrent(
    {
      clientX: touch.clientX,
      clientY: touch.clientY
    }
  );

  // if the touch is in one of the cells and it's disfferent than the last touch cell
  if (currentTarget && currentTarget != activeTarget) {
    activeTarget = currentTarget;
    console.log(currentTarget.html());
    $('#output').append(currentTarget.html() + ' ');
  }
} 

$('.wrapper').bind({
  touchstart: touchF,
  touchmove: touchF
});

function getCurrent(touch) {
  // check if the touch coords are in the position of one of the cells and which one
  var a = matrix.filter(function(obj) {
    var b = (
      touch.clientX > obj.left &&
      touch.clientX < obj.right &&
      touch.clientY < obj.bottom &&
      touch.clientY > obj.top
    );

    return b;
  });

  return a.length > 0 ? a[0].e : null;
}

.wrapper:after {
  content:" ";
  display:table;
  clear:both;
}

.wrapper div {
  width:50px;
  height:50px;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id='Adiv' style='float: left'>A</div>
  <div id='Bdiv' style='float: left'>B</div>
  <div id='Cdiv' style='float: left'>C</div>
</div>
<hr />
<div id="output"></div>

http://jsbin.com/kokoxuwebi/edit?html,css,js

javascript检测到手指移过div

1 个答案: