CODEWITHSUNDEEP
javascriptjquery
Naiya55
Naiya55

Reputation: 134

Do click/onclick not work for touchscreens

I am using a website to display information in the form of a table. The user can click rows on the table to change their color, and I also have a button that allows the user to pause the refreshing of the page so that no new information is added. Both of these functions work on desktop, but not on touchscreen. My first idea was that a touch on a touchpad wasn't considered a click, but after researching this that theory doesn't seem to be true. When I run this on my desktop it works just fine. Where am I going wrong?

Update: I have found some sources saying that click will not work, but some still say it will work on a 300 ms delay. I'm still not sure which is right, but assuming that click/onclick will not work for touchscreens, what would be some good alternatives? 

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

Update 2: None of the solutions provide have worked on the tablet so far, so I downloaded the Jquery mobile library and the tap function from it. My code now looks like this

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

This once again works on my desktop, but not the tablet. The mobile library is supposed to work with pretty much any touchscreen. I'm at a loss now.

Update 3: Added eventListener to the code. I used the line $("*")[0].addEventListener("click", function () { which worked on desktop, but not on tablet. I other keywords instead of click like touchstart and touchend, vclick, and tap. Getting no response at all from this on tablet is more than a little odd, but I'm not sure where to start looking into this.

Upvotes: 2

Views: 2472

Answers (2)

Naiya55
Naiya55

Reputation: 134

So I have no idea why, but the problem was internet explorer. When I switched to google chrome, both suggestions I received worked just fine.

Upvotes: 0

Rounin
Rounin

Reputation: 29463

Touchscreen devices will respond to

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

but there is a 300ms delay while the device waits to see if the tap becomes a double-tap.

There are several methods to disable the delay:

See:

Upvotes: 2

Related Questions