移动端Web控件屏蔽多点触控（纯Javascript版）_禁止网页多点触控-优快云博客

本文链接：https://blog.youkuaiyun.com/think_A_lot/article/details/99682055

本文介绍了一种在触控设备上实现单点触控识别的方法。通过设置全局变量跟踪触摸点标识符，该方法能有效地区分并处理单点触控事件，包括touchstart、touchmove、touchend和touchcancel。适用于需要精确触控反馈的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、设置一个全局变量

this.touchID = null;

2、判断单点触控

function processEvent(event) {
  if (event.changedTouches) {
	// 单点触控
    var currentTouch = null;
    if (event.type == "touchstart") {
      // 假如当前无触摸点，则新建一个
      if (this.touchID == null) {
        this.touchID = event.changedTouches[0].identifier;
        currentTouch = event.changedTouches[0];
      } else {
        return false;
      }
    } else if (event.type == "touchmove") {
      // 判断触发当前事件的触摸点中是否有touchID对应的触摸点
      for (let i = 0; i < event.changedTouches.length; i++) {
        if (event.changedTouches[i].identifier == this.touchID) {
          currentTouch = event.changedTouches[i];
          break;
        }
      }
      if (!currentTouch) {
        return false;
      }
    } else if (event.type == "touchend" || event.type == "touchcancel") {
      // 判断触发当前事件的触摸点中是否有touchID对应的触摸点
      for (let i = 0; i < event.changedTouches.length; i++) {
        if (event.changedTouches[i].identifier == this.touchID) {
          currentTouch = event.changedTouches[i];
          break;
        }
      }
      if (currentTouch) {
        this.touchID = null;
      } else {
        return false;
      }
    }
    // do something for current touch point
    return true;
  }
  return false;
}

3、绑定触控事件

obj.addEventListener('touchStart', (e) => {
  var flag = processEvent(e);
  if(!flag) {
  	return;
  }
  // do something
});

obj.addEventListener('touchMove', (e) => {
  var flag = processEvent(e);
  if(!flag) {
  	return;
  }
  // do something
});

obj.addEventListener('touchEnd', (e) => {
  var flag = processEvent(e);
  if(!flag) {
  	return;
  }
  // do something
});

obj.addEventListener('touchCancel', (e) => {
  var flag = processEvent(e);
  if(!flag) {
  	return;
  }
  // do something
});