title: Do click/onclick not work for touchscreens
body: <p>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?</p>
  
  <p>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? </p>
  
  <pre><code>$(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("&lt;a href='#' onclick='pause()'&gt;PAUSE&lt;/a&gt;");
      }
  }
  
  function setRefresh(t) {
      enableRefresh(t);
  
      // Control the pause button
      $("#pause").click(function () {
          if ($("#pause").text() == "PAUSE") {
              $("#pause").html("&lt;a href='#' onclick='pause()'&gt;CONTINUE&lt;/a&gt;");
              clearTimeout(timeOut);
          } else {
              $("#pause").html("&lt;a href='#' onclick='pause()'&gt;PAUSE&lt;/a&gt;");
              enableRefresh(t);
          }
      });
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>$(document).ready(function () {
  var timeOut 
  var timeOutInter = 10000;
  setRefresh(timeOutInter)
  $("#hdTable").children("tbody").children("tr").children("td").on("tap", function () {
        $(this.parentNode).toggleClass("active");
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>function enableRefresh(t) {
      timeOut = setTimeout(function () {
          location.reload();
      }, t);
  
      if ($("#pause").text() == "CONTINUE") {
          $("#pause").html("&lt;a href='#' onclick='pause()'&gt;PAUSE&lt;/a&gt;");
      }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>function setRefresh(t) {
      enableRefresh(t);
  
      // Control the pause button
      $("#pause").on("tap", function () {
          if ($("#pause").text() == "PAUSE") {
              $("#pause").html("&lt;a href='#' onclick='pause()'&gt;CONTINUE&lt;/a&gt;");
              clearTimeout(timeOut);
          } else {
              $("#pause").html("&lt;a href='#' onclick='pause()'&gt;PAUSE&lt;/a&gt;");
              enableRefresh(t);
           }
      });
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>