H5移动端的一些事件

发表于 | 分类于 |

随着移动设备的普及，移动互联网也变得越来越重要。移动端的产品的体验也变得非常重要了，这里就谈一下移动端一些事件。

移动端的手势事件

移动端的手势事件主要有下面 4 个。
touchstart：当手指放在屏幕上触发，即使已经有手指放在屏幕上也会触发；

touchmove：当手指在屏幕上滑动时，连续地触发

touchend：当手指离开屏幕时触发；

touchcancel：当系统停止跟踪时触发，基本用不到；

由于元素的默认事件行为和事件冒泡，也都可以在事件函数内部阻止事件默认行为和事件冒泡。每个 touch 事件对象都包含以下属性：

touches：表示当前跟踪的触摸操作的 Touch 对象的数组；

targetTouches：特定于事件目标的 Touche 对象的数组；

changeTouches：表示自上次触摸以来发生了什么改变 Touch 对象的数组；

还有比较常用的以下属性：

  1. clientX：触摸目标在视口中的 x 坐标；

  2. clientY：触摸目标在视口中的 y 坐标：

  3. identifier：触摸目标的唯一 ID；

  4. pageX：触摸目标在页面中的 x 坐标；

  5. pageY：触摸目标在页面中的 y 坐标；

  6. screenX：触摸目标在屏幕中的 x 坐标;

  7. screenY：触摸目标在屏幕中的 y 坐标;

  8. target：触目的 DOM 节点目标;

三个事件的使用方法如下：

1
2
3
4
5
6
7
8
9
var ele = document.querySelector(selector);
ele.addEventListener(
	"touchstart",
	function (e) {
		console.log(e);
		// do something
	},
	false
);

这里需要注意的是，在 touchend 事件中，发生该事件时，touches 里面没有任何的 touch 对象，需要使用 changeTouches。

手势事件

gesturestart：当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发；

gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发；

gestureend：当任何一个手指从屏幕上面移开时触发。

需要注意的是，只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

触摸事件与手势事件之间的关系

注意：触摸事件目前只支持 IOS 设备

当一个手指放在屏幕上时，会触发 touchstart 事件，如果另一个手指又放在了屏幕上，则会触发 gesturestart 事件，随后触发基于该手指的 touchstart 事件。

如果一个或两个手指在屏幕上滑动，将会触发 gesturechange 事件，但只要有一个手指移开，则会触发 gestureend 事件，紧接着又会触发 toucheend 事件。

手势的专有属性

rotation：表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从零开始。

scale：表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从 1 开始，并随距离拉大而增长。

屏幕旋转事件(onorientationchange)

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
var orientationChange = function () {
	switch (window.orientation) {
		case 0:
			alert(
				"肖像模式 0,screen-width: " +
					screen.width +
					"; screen-height:" +
					screen.height
			);
			break;
		case -90:
			alert(
				"左旋 -90,screen-width: " +
					screen.width +
					"; screen-height:" +
					screen.height
			);
			break;
		case 90:
			alert(
				"右旋 90,screen-width: " +
					screen.width +
					"; screen-height:" +
					screen.height
			);
			break;
		case 180:
			alert(
				"风景模式 180,screen-width: " +
					screen.width +
					"; screen-height:" +
					screen.height
			);
			break;
	}
};

window.onorientationchange = orientationchange();

其他常见问题

判断设备平台

1
2
3
4
5
6
7
8
9
10
var judgePlatform = function () {
	// 1.IOS、2.Android、3.PC
	if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
		alert("IOS");
	} else if (/(Android)/i.test(navigator.userAgent)) {
		alert("Android");
	} else {
		alert("Win");
	}
};

禁止 IOS 弹出操作窗口

1
style: "-webkit-touch-callout:none";

IOS 系统，中文输入法输入英文时，字母之间有六分之一个空格

1
this.value = this.value.replace(/\u2006/g, "");

IOS 系统，contenteditable 为 true，不可输入编辑

1
style: "-webkit-user-select:text";

禁止用户选中文字

1
style: "-webkit-user-select:none";

Andriod 去掉语音输入按钮

1
2
3
input::-webkit-input-speech-button {
	display: none;
}

判断是否为微信浏览器

1
2
3
4
5
6
7
8
var is_weixin(){
	var ua = navigator.userAgent.toLowcase();
	if(ua.match(/MicroMessager/i)=='micromessager'){
		return true;
	}else{
		return false;
	}
}

[越努力，越幸运！]