Javascript 检测触摸屏

随着移动设备的流行，越来越多的网站需要适应触摸屏幕的交互方式。Javascript 可以检测到用户使用的是鼠标还是触摸屏，并根据不同的输入方式来改变页面的交互方式。

检测触摸屏

我们可以使用 ontouchstart 事件来检测用户是否使用触摸屏：

if ('ontouchstart' in document.documentElement) {
  // 用户使用触摸屏
} else {
  // 用户使用鼠标
}

在这个示例中，我们通过检查 document.documentElement（文档的根元素）是否有 ontouchstart 属性来判断用户是否使用触摸屏。如果存在，说明用户正在使用触摸屏。

改变交互方式

检测到用户使用触摸屏后，我们可以改变页面的交互方式。例如，我们可以监听 touchstart、touchmove 和 touchend 事件来实现触摸屏的滑动效果：

var startX, startY;

function onTouchStart(event) {
  startX = event.touches[0].pageX;
  startY = event.touches[0].pageY;
}

function onTouchMove(event) {
  var deltaX = event.touches[0].pageX - startX;
  var deltaY = event.touches[0].pageY - startY;
  // 实现滑动效果
}

function onTouchEnd(event) {
  // 处理触摸结束事件
}

if ('ontouchstart' in document.documentElement) {
  document.addEventListener('touchstart', onTouchStart, false);
  document.addEventListener('touchmove', onTouchMove, false);
  document.addEventListener('touchend', onTouchEnd, false);
} else {
  // 处理鼠标事件
}

在这个示例中，我们定义了 onTouchStart、onTouchMove 和 onTouchEnd 函数来处理触摸屏的事件。如果用户正在使用触摸屏，我们就将这些函数添加到相应的事件监听器中。如果用户正在使用鼠标，我们可以使用适当的鼠标事件来替代这些触摸屏事件。

总结

Javascript 可以检测到用户使用的是鼠标还是触摸屏，并根据不同的输入方式来改变页面的交互方式。检测触摸屏的方法是检查文档的根元素是否有 ontouchstart 属性。根据用户的输入方式，我们可以使用不同的事件来处理用户的操作，提供更好的用户体验。