通过touchstart和touchmove事件选择多个表格单元格在移动设备中不起作用

编程问答 2022-05-14

问题描述

下面是我的代码，它适用于鼠标单击和拖动事件，但不适用于 touchstart 和 touchmove。我从这里复制了示例代码 Select Cells On A Table By Dragging 我还想动态添加表，以便此代码适用于动态添加的表

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css" media="screen">
    table td {
      width:100px;
      height:100px;
      text-align:center;
      vertical-align:middle;
      background-color:#ccc;
    }

    table td.highlighted {
      background-color:#F00;
    }
  </style>
</head>
<body>
  <table cellpadding="0" cellspacing="1" 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>

  <!-- 1. jQuery UI -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

<!-- 2. Include touch punch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" integrity="sha512-0bEtK0USNd96MnO4XhH8jhv3nyRF0eK87pJke6pkYf3cM0uDIhNJy9ltuzqgypoIFXw3JSuiy04tVk4AjpZdZw==" crossorigin="anonymous"></script>
  <script type="text/javascript" charset="utf-8">
    $(function () {
  var isMouseDown = false,isHighlighted;
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    })
    .mouSEOver(function () {
      if (isMouseDown) {
        $(this).toggleClass("highlighted",isHighlighted);
      }
    })
    
    $(document).on('touchstart','#our_table td',function(){
        isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    });
    
    $(document).on('touchmove',function(){
        if (isMouseDown) {
        $(this).toggleClass("highlighted",isHighlighted);
      }
    });


  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });
    
});
    
  </script>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

touchmovetouchstart