Question

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

更新：我发现有些消息来源说点击不起作用，但有些人仍然说它可以在300毫秒的延迟时间内工作。我仍然不确定哪个是正确的，但假设点击/ 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。我用了这条线 $（＆＃34; *＆＃34;）[0] .addEventListener（＆＃34; click＆＃34;，function（）{ 它适用于台式机，但不适用于平板电脑。我是其他关键词，而不是点击touchstart和touchend，vclick和点击。在平板电脑上完全没有回应，这有点奇怪，但我不知道从哪里开始研究这个。

Answer 1

触摸屏设备将响应

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

但是当设备等待点击是否成为双击时，有300ms的延迟。

有几种方法可以禁用延迟：

查看：

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日）

Answer 2

所以我不明白为什么，但问题是Internet Explorer。当我切换到谷歌浏览器时，我收到的两个建议都很好。

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

2 个答案: