Vip*_*oni 0 javascript iphone jquery touch
我有一个6列8行的表格。
<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>
我必须实现，当用户触摸并在表格的单元格上方移动时，这些单元格将填充一些字母或符号。我尝试了以下操作，但是它不起作用，它仅在我开始触摸时填充第一个单元格。
$("#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界面，该界面允许“播放器”通过在鼠标按下时拖动鼠标来画在板上，并且希望对触摸设备也是如此。
不幸的是，触摸事件仅保留对它们开始的DOM元素的引用（即触发“ touchstart”的位置），而不能识别在其下存在的DOM元素。相反，触摸事件会维护几个Touch对象列表-代表与触摸屏的交互。这些对象的属性中有clientX和clientY，它们指示事件相对于视口的X和Y坐标。
我决定查看DOM是否提供了可以基于这些坐标识别DOM元素的查找功能，并由于以下问题而找到了“ document.elementFromPoint”：通过绝对坐标定位DOM元素。
最后，我创建了一个“ touchmove”事件侦听器，该侦听器使用相关触摸事件的坐标调用elementFromPoint方法（对我来说，这是e.touches [0]），然后对元素进行了适当的更改（在我的情况下，切换文本框的选中属性）。这是事件监听器：
//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
| 归档时间： |
|
| 查看次数： |
1262 次 |
| 最近记录： |