javascript - 更改移动浏览器的点击事件

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 Project Link

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;
}