Question

鼠标拖动选择在触控设备中不起作用。我该如何解决这个问题。请检查我的小提琴

$(function () {
    var isMouseDown = false;
    $("#our_table td")
        .mousedown(function () {
            isMouseDown = true;
            $(this).toggleClass("highlighted");
            return false; // prevent text selection
        })
        .mouseover(function () {
            if (isMouseDown) {
                $(this).toggleClass("highlighted");
            }
        });
    $(document)
        .mouseup(function () {
            isMouseDown = false;
        });
});

Answer 1

将触摸事件（例如touchstart，touchend，touchmove）附加到元素上。例如，

$("#our_table td")
.touchstart(function () {
    isMouseDown = true;
    $(this).toggleClass("highlighted");
    return false; // prevent text selection
})
.touchmove(function () {
    if (isMouseDown) {
        $(this).toggleClass("highlighted");
    }
});

Answer 2

简介1

我不认为您可以在同一个脚本中执行桌面版和移动版。在这个答案中，我只专注于mobile版本，因为你有桌面。只需检查您是在移动设备还是桌面，并刷新正确的脚本。

简介2

这个问题的挑战是：

与mouse个事件进行比较，只有少数touch个事件。
与返回鼠标移动的当前节点的mousemove事件进行比较，touchmove返回开始移动的元素。换句话说，如果您从节点a开始，并移至节点b，则event.target仍会返回节点a。

实际答案

为了解决这些问题，我编写了一些代码，用于检查touchstart和touchmove中正在移动的元素，然后对正确的元素进行切换。

＆＃13;

// first - store the coords of all the cells for the position check
var matrix = $('#our_table td').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;
      activeTarget.toggleClass('highlighted');
    }
 } 

$('#our_table').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;
}

＆＃13;

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}

table td.highlighted {
  background-color:#999;
}

＆＃13;

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>

＆＃13;

小提琴：http://jsbin.com/favobu

鼠标拖动选择在触摸设备上不起作用。我怎样才能成功呢？

2 个答案: