觸摸iphone中表格單元格的事件

我有一張6列8行的表格。觸摸iphone中表格單元格的事件

<table border="1" id="patterntable" style="cursor: pointer;"> 
    <tr> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
     <td align="center" width="40" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
     <td align="center" height="40" >&nbsp;</td> 
    </tr> 
</table>

我必須實現，當用戶觸摸並移動在表的單元格時，這些單元格將填充一些字母或符號。我試過以下，但它不工作，它只填充第一個單元格，我開始觸摸。

$("#patterntable td").on("touchmove",function(ev){ 
    ev.preventDefault(); 
    var e = ev.originalEvent; 
    $.each(e.touches, function(key, value) { 
     var touch = e.touches[key]; 
     if (touch.target.innerText != "\xA0"){ 
      touch.target.innerText = "\xA0"; 
     } else { 
      touch.target.innerText = patternSymbol; 
     } 
    }); 
});

請有人幫忙。

來源

2015-02-06 Vipin Soni

我有一個類似的問題 - 我做了一個用複選框表格做的生命遊戲的HTML端口。我能夠創建一個很酷的mousedown界面，允許「播放器」在拖動鼠標的同時拖動鼠標在畫板上畫畫，並希望爲觸摸設備做同樣的工作。

不幸的是，觸摸事件只持有對它們開始的DOM元素的引用（即，其中「touchstart」被觸發）並且不識別存在於其下的DOM元素。相反，觸摸事件會保留多個Touch對象列表 - 它們表示與觸摸屏的交互。在這些對象的屬性中有clientX和clientY，它們表示事件相對於視口的X和Y座標。

我決定查看DOM是否提供了一個可以識別基於這些座標的DOM元素的查找函數，並且由於以下問題找到「document.elementFromPoint」：Locating DOM element by absolute coordinates。

最後，我創建了一個'touchmove'事件偵聽器，它使用相關觸摸事件的座標（對於我來說，這是e.touches [0]）調用elementFromPoint方法，然後對elemet（在我的情況下，切換文本框檢查屬性）。下面是一個事件偵聽器：

//this.gameGrid is a parent element for the checkboxes 
this.gameGrid.addEventListener("touchmove", function(e) { 
      // get the touch element 
      var touch = e.touches[0]; 

      // get the DOM element 
      var checkbox = document.elementFromPoint(touch.clientX, touch.clientY); 

      // make sure an element was found - some areas on the page may have no elements 
      if (checkbox) { 
       // interact with the DOM element 
       checkbox.checked = !checkbox.checked; 
      } 
      ... 
     });

鏈接到一個工作示例，該示例的所有源代碼，並約我研究這個回答一些注意事項可以在這裏找到：https://gist.github.com/VehpuS/6fd5dca2ea8cd0eb0471

來源

2015-07-29 21:00:57

觸摸iphone中表格單元格的事件

回答

相關問題