javascript - iPhone 中表格单元格的触摸事件

Question

我有一个 6 列 8 行的表格。

<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;
        }
    });
});

请有人帮忙。

Answer 1

我有一个类似的问题 - 我制作了一个用复选框表制作的生活游戏的 HTML 端口。我能够创建一个很酷的鼠标按下界面，允许“玩家”通过在鼠标按下时拖动鼠标来在板上绘图，并且希望对触摸设备执行相同的操作。

不幸的是，触摸事件仅保存对它们开始处(即“touchstart”触发处)的 DOM 元素的引用，并且无法识别其下存在的 DOM 元素。相反，触摸事件维护多个 Touch 对象列表 - 表示与触摸屏的交互。这些对象的属性包括 clientX 和 clientY，它们指示事件相对于视口(viewport)的 X 和 Y 坐标。

我决定看看 DOM 是否提供了可以根据这些坐标识别 DOM 元素的查找功能，并通过以下问题找到了“document.elementFromPoint”:Locating DOM element by absolute coordinates .

最后，我创建了一个“touchmove”事件监听器，它使用相关触摸事件的坐标调用 elementFromPoint 方法(对我来说，这是 e.touches[0])，然后对 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