移动端Web控件屏蔽多点触控（纯Javascript版）_禁止网页多点触控

1、设置一个全局变量

this.touchID = null;
1

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31