javascript - click/onclick 不适用于触摸屏

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 () { 它适用于台式机，但不适用于平板电脑。我使用其他关键字代替 click，例如 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 日)