移动端Web控件屏蔽多点触控

1.声明变量

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