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

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