在iphone的表格单元格上触摸事件

touch events over table cells in iphone

本文关键字：触摸 事件 单元格 表格 iphone      更新时间：2023-09-26

我有一个由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;
        }
    });
});

请有人帮忙。

我也遇到过类似的问题——我用一张复选框表制作了一个生活游戏的HTML端口。我能够创建一个很酷的鼠标向下界面，允许"玩家"在鼠标向下时拖动鼠标在棋盘上画画，并希望对触摸设备也这样做。

不幸的是，触摸事件只保存对其开始位置（即"touchstart"激发位置）的DOM元素的引用，而不识别其下存在的DOM元素。相反，触摸事件维护了触摸对象的几个列表，这些列表表示与触摸屏的交互。这些对象的属性包括clientX和clientY，它们指示事件相对于视口的X和Y坐标。

我决定看看DOM是否提供了一个查找函数，可以根据这些坐标识别DOM元素，并找到了"document.elementFromPoint"，这要归功于以下问题：通过绝对坐标定位DOM元素。

最后，我创建了一个"touchmove"事件监听器，该监听器使用相关触摸事件的坐标调用elementFromPoint方法（对我来说，这是e.touch[0]），然后对elemet进行适当的更改（在我的情况下，切换textbox checked属性）。这是一个事件监听器：

//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

相关文章：