在iPhone的表格单元上触摸事件 [英] touch events over table cells in iphone
问题描述
我有一个6列8行的表格.
I have a table of 6 cols 8 rows.
<table border="1" id="patterntable" style="cursor: pointer;">
<tr>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
</tr>
<tr>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
</tr>
<tr>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
</tr>
<tr>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
</tr>
<tr>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
</tr>
<tr>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
<td align="center" width="40" height="40" > </td>
</tr>
<tr>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
</tr>
<tr>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
<td align="center" height="40" > </td>
</tr>
</table>
我必须实现，当用户触摸并在表格的单元格上方移动时，这些单元格将填充一些字母或符号. 我尝试了以下操作，但是它不起作用，它仅在我开始触摸时填充第一个单元格.
I have to achieve that when an user touch and move over the cells of table those cell will be filled with some letter or sign. I have tried following but it is not working, It fills the first cell only where I started the touch.
$("#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;
}
});
});
请有人帮助.
推荐答案
我遇到了类似的问题-我用复选框创建了HTML的生活游戏端口.我能够创建一个很酷的mousedown界面，该界面允许玩家"通过在鼠标按下时拖动鼠标来画在板上，并且希望对触摸设备也是如此.
I had a similar issue - I made an HTML port of game of life made with a table of checkboxes. I was able to create a cool mousedown interface that allowed the "player" to draw on the board by dragging the mouse while it was down, and wanted to do the same for touch devices.
不幸的是，触摸事件仅保留对它们开始的DOM元素的引用(即触发"touchstart"的位置)，而不能识别在其下存在的DOM元素.相反，触摸事件会维护几个Touch对象列表-代表与触摸屏的交互.这些对象的属性中有clientX和clientY，它们指示事件相对于视口的X和Y坐标.
Unfortunately, touch events only hold references to the DOM element where they began (i.e. where "touchstart" fired) and do not recognize the DOM elements that exist under them. Instead, touch events maintain several lists of Touch objects - which represent interactions with the touch screen. Among these objects' properties are clientX and clientY, which indicate the X and Y coordinates of the events relative to the viewport.
我决定查看DOM是否提供了可以基于这些坐标识别DOM元素的查找功能，并由于以下问题而找到了"document.elementFromPoint":
I decided to see whether the DOM provided with a lookup function that could recognize DOM elements based on these coordinates, and found "document.elementFromPoint" thanks to the following question: Locating DOM element by absolute coordinates.
最后，我创建了一个"touchmove"事件侦听器，它使用相关触摸事件的坐标调用了elementFromPoint方法(对我来说，这是e.touches [0])，然后对图元进行了适当的更改(在我的情况下，切换文本框的选中属性).这是事件监听器:
Finally, I created a 'touchmove' event listener that called the elementFromPoint method using the coordinates of the relevant touch event (for me, this was e.touches[0]) and then made the appropriate change to the elemet (in my case, toggling the textbox checked attribute). Here is a the event listener:
//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
Links to a working example, the full source code for that example and some more notes about my research for this answer can be found here: https://gist.github.com/VehpuS/6fd5dca2ea8cd0eb0471
这篇关于在iPhone的表格单元上触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
