javascript - 点击/点击不适用于触摸屏

Question

我正在使用一个网站以表格的形式显示信息。用户可以单击表格中的行来更改它们的颜色，我还有一个按钮允许用户暂停页面的刷新，这样就不会添加新信息。这两个功能都适用于桌面，但不适用于触摸屏。我的第一个想法是触摸触摸板不被认为是点击，但在研究了这个之后，这个理论似乎并不正确。当我在我的桌面上运行它时，它工作得很好。我哪里错了？

更新:我发现一些消息来源说点击不起作用，但有些人仍然说它会在 300 毫秒延迟时起作用。我仍然不确定哪个是正确的，但假设 click/onclick 不适用于触摸屏，那么有什么好的选择？

$(document).ready(function () {
    var timeOut 
    var timeOutInter = 10000;
    setRefresh(timeOutInter);
    $("#hdTable")
        .children("tbody")
        .children("tr")
        .children("td")
        .click(function () {
            $(this.parentNode).toggleClass("active");
        });
});

function enableRefresh(t) {
    timeOut = setTimeout(function () {
        location.reload();
    }, t);

    if ($("#pause").text() == "CONTINUE") {
        $("#pause").html("<a href='#' onclick='pause()'>PAUSE</a>");
    }
}

function setRefresh(t) {
    enableRefresh(t);

    // Control the pause button
    $("#pause").click(function () {
        if ($("#pause").text() == "PAUSE") {
            $("#pause").html("<a href='#' onclick='pause()'>CONTINUE</a>");
            clearTimeout(timeOut);
        } else {
            $("#pause").html("<a href='#' onclick='pause()'>PAUSE</a>");
            enableRefresh(t);
        }
    });
}

更新 2:到目前为止，所提供的解决方案均无法在平板电脑上运行，因此我从中下载了 Jquery 移动库和 tap 函数。我的代码现在看起来像这样

$(document).ready(function () {
var timeOut 
var timeOutInter = 10000;
setRefresh(timeOutInter)
$("#hdTable").children("tbody").children("tr").children("td").on("tap", function () {
      $(this.parentNode).toggleClass("active");
});

});

function enableRefresh(t) {
    timeOut = setTimeout(function () {
        location.reload();
    }, t);

    if ($("#pause").text() == "CONTINUE") {
        $("#pause").html("<a href='#' onclick='pause()'>PAUSE</a>");
    }

function setRefresh(t) {
    enableRefresh(t);

    // Control the pause button
    $("#pause").on("tap", function () {
        if ($("#pause").text() == "PAUSE") {
            $("#pause").html("<a href='#' onclick='pause()'>CONTINUE</a>");
            clearTimeout(timeOut);
        } else {
            $("#pause").html("<a href='#' onclick='pause()'>PAUSE</a>");
            enableRefresh(t);
         }
    });
}

这再次适用于我的台式机，但不适用于平板电脑。移动图书馆应该可以与几乎所有触摸屏一起使用。我现在不知所措。

更新 3:在代码中添加了 eventListener。我用线 $("*")[0].addEventListener("点击", function () {它适用于台式机，但不适用于平板电脑。我使用其他关键字代替点击，例如 touchstart 和 touchend、vclick 和 tap。在平板电脑上完全没有任何反应有点奇怪，但我不确定从哪里开始研究这个。

Answer 1

触摸屏设备会响应

elem.addEventListener('click', functionName, false);

但是当设备等待查看点击是否变为双击时会有 300 毫秒的延迟。

有几种方法可以关闭延迟:

参见:

• What Exactly Is..... The 300ms Click Delay 作者:TJ Van Toll(2013 年 11 月 21 日)
• 5 Ways to Prevent the 300ms Click Delay on Mobile Devices 作者:Craig Buckler(2014 年 1 月 8 日)