更改移動瀏覽器的點擊事件

Question

我想為寬度小於400像素的瀏覽器刪除按鈕（溫度切換）。 相反，我想觸摸div來切換溫度。 我寫了這段代碼，但是沒有用。 “ touchTemp”是包含div的ID。

if (window.innerWidth < 400) {
  document.getElementById("touchTemp").addEventListener("click",
    function(e) {
      console.log("Screen width is less than 400px");
      var text = $('#temperature').text();
      if (text.slice(-1) === "F") {
        $("#temperature").html(tempCelsius + " C" + "°");
      } else {
        $("#temperature").html(tempFahrenheit + " F");
      }

      e.preventDefault();
    });
} // end of "if statement"

藍色div框是要觸摸以切換溫度的區域。

CodePen項目鏈接

Answer 1

我建議您將觸摸處理程序與單擊一起添加，以確保完整性和易於測試性。

var theElement = document.getElementById("touchTemp");

theElement.addEventListener("click", myFunction, false);
theElement.addEventListener("touchend", myFunction, false);

function myFunction(e) {
  console.log("Screen width is less than 400px");
  var text = $('#temperature').text();
  if (text.slice(-1) === "F") {
    $("#temperature").html(tempCelsius + " C" + "°");
  } else {
    $("#temperature").html(tempFahrenheit + " F");
  }

  e.preventDefault();
  return false;
}