共计 4538 个字符，预计需要花费 12 分钟才能阅读完成。
github 地址：https://github.com/xubaodian/… 为什么要模拟这些事件？1、上述这些事件中，浏览器直接支持的事件只有点击，而其它事件使用频率也很高。
2、移动端 web 原生点击事件会有 300ms 的延迟，因为用户肯能双击，为了判断用户是单击还是双击，所以会有这个延迟，这个延迟会衍生很多问题，例如点击穿透。所以我们可以不用原生的点击事件，而使用模拟点击事件。
如何模拟这些事件呢？我们可以总结这些操作，都是手指先触摸屏幕，然后在离开。不同点在于滑动事件手指有位移，而点击事件手指没有位移。首先想到的就是所有浏览器都是支持 touchstart、touchmove 和 touchend 事件的，我们可以利用这些事件来模拟上述事件。
原理如下：1、监听 dom 的 touchstart 和 touchend 事件。2、分别记录 touchstart、touchend 事件的位置和时间，计算位移 delta（包括 x 和 y）和时间间隔 timegap。3、根据 delta 和 timegap 的值，判断属于哪种事件。有两种情况：
delta 中 x 和 y 都很小
这是点击操作，用户点击按钮等时，理论上是不会有位移的，但是实际中也可能发生一个很小的位移，毕竟手指不是精密仪器。如果时间间隔 timegap 较小，则属于点击，如果 timegap 较大，属于长按操作。
delta 中的 x 或 y 比较大
这种情况下，就是手指发生滑动操作了，至于是左右滑动，还是上下滑动，根据 x 和 y 的大小来判断。|x| > |y|（|x| 代表 x 的绝对值），左右滑动，x>0, 右滑，反之左滑。|x| <= |y|，上下滑动，y>0, 下滑，反之上滑。
这样就模拟了移动端 web 中的这几个事件了。代码如下：
/**
* 用 touch 事件模拟点击、左滑、右滑、上拉、下拉等时间，
* 是利用 touchstart 和 touchend 两个事件发生的位置来确定是什么操作。
* 例如：
* 1、touchstart 和 touchend 两个事件的位置基本一致，也就是没发生位移，那么可以确定用户是想点击按钮等。
* 2、touchend 在 touchstart 正左侧，说明用户是向左滑动的。
* 利用上面的原理，可以模拟移动端的各类事件。
**/
const EventUtil = (function() {
// 支持事件列表
let eventArr = [‘eventswipeleft’, ‘eventswiperight’, ‘eventslideup’, ‘eventslidedown’, ‘eventclick’, ‘eventlongpress’];
//touchstart 事件，delta 记录开始触摸位置
function touchStart(event) {
this.delta = {};
this.delta.x = event.touches[0].pageX;
this.delta.y = event.touches[0].pageY;
this.delta.time = new Date().getTime();
}
/**
* touchend 事件，计算两个事件之间的位移量
* 1、如果位移量很小或没有位移，看做点击事件
* 2、如果位移量较大，x 大于 y，可以看做平移，x>0, 向右滑，反之向左滑。
* 3、如果位移量较大，x 小于 y，看做上下移动，y>0, 向下滑，反之向上滑
* 这样就模拟的移动端几个常见的时间。
* */
function touchEnd(event) {
let delta = this.delta;
delete this.delta;
let timegap = new Date().getTime() – delta.time;
delta.x -= event.changedTouches[0].pageX;
delta.y -= event.changedTouches[0].pageY;
if (Math.abs(delta.x) < 5 && Math.abs(delta.y) < 5) {
if (timegap < 1000) {
if (this[‘eventclick’]) {
this[‘eventclick’].map(function(fn){
fn(event);
});
}
} else {
if (this[‘eventlongpress’]) {
this[‘eventlongpress’].map(function(fn){
fn(event);
});
}
}
return;
}
if (Math.abs(delta.x) > Math.abs(delta.y)) {
if (delta.x > 0) {
if (this[‘eventswipeleft’]) {
this[‘eventswipeleft’].map(function(fn){
fn(event);
});
}
} else {
this[‘eventswiperight’].map(function(fn){
fn(event);
});
}
} else {
if (delta.y > 0) {
if (this[‘eventslidedown’]) {
this[‘eventslidedown’].map(function(fn){
fn(event);
});
}
} else {
this[‘eventslideup’].map(function(fn){
fn(event);
});
}
}
}
function bindEvent(dom, type, callback) {
if (!dom) {
console.error(‘dom is null or undefined’);
}
let flag = eventArr.some(key => dom[key]);
if (!flag) {
dom.addEventListener(‘touchstart’, touchStart);
dom.addEventListener(‘touchend’, touchEnd);
}
if (!dom[‘event’ + type]) {
dom[‘event’ + type] = [];
}
dom[‘event’ + type].push(callback);
}
function removeEvent(dom, type, callback) {
if (dom[‘event’ + type]) {
for(let i = 0; i < dom[‘event’ + type].length; i++) {
if (dom[‘event’ + type][i] === callback) {
dom[‘event’ + type].splice(i, 1);
i–;
}
}
if (dom[‘event’ + type] && dom[‘event’ + type].length === 0) {
delete dom[‘event’ + type];
let flag = eventArr.every(key => !dom[key]);
if (flag) {
dom.removeEventListener(‘touchstart’, touchStart);
dom.removeEventListener(‘touchend’, touchEnd);
}
}
}
}
return {
bindEvent,
removeEvent
}
})();
在闭包中定义了几个事件处理操作，EventUtil 有两个方法，bindEvent 绑定事件，removeEvent 是移除事件绑定。支持六个事件：swipeleft 是左滑事件，swiperight 是右滑事件，slideup 是上滑事件，slidedown 下滑事件，click 点击事件，longpress 长按点击事件。
使用案例如下：在页面中引用上述代码：
<script src=”./EventUtil.js”></script>
测试代码如下, 代码中有注释，可以看到如何应用这些模拟事件：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Page Title</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
#main{
width: 100%;
height: 300px;
background: blue;
color: white;
font-size: 20px;
text-align: center;
}
</style>
<!– 引入事件 –>
<script src=”./EventUtil.js”></script>
</head>
<body style=”font-size: 14px;”>
<div id=”main”></div>
<button id=”test”> 接触左滑绑定 </button>
<script>
// 获取 dom
let domContent = document.querySelector(‘#main’);
// 定义各类事件，为了可以解除事件绑定，事件回调不使用匿名函数
function handleClick() {
alert(‘ 点击事件 ’);
}
function handleLeft() {
alert(‘ 左滑事件 ’);
}
function handleRight() {
alert(‘ 右滑事件 ’);
}
function handleUp() {
alert(‘ 下滑事件 ’);
}
function handleDown() {
alert(‘ 上滑事件 ’);
}
function handleLong() {
alert(‘ 长按事件 ’);
}
// 绑定点击事件
EventUtil.bindEvent(domContent, ‘click’, handleClick);
// 绑定两次左滑事件
EventUtil.bindEvent(domContent, ‘swipeleft’, handleLeft);
EventUtil.bindEvent(domContent, ‘swipeleft’, handleLeft);
// 绑定右滑事件
EventUtil.bindEvent(domContent, ‘swiperight’, handleRight);
// 上滑事件
EventUtil.bindEvent(domContent, ‘slideup’, handleUp);
// 下滑事件
EventUtil.bindEvent(domContent, ‘slidedown’, handleDown);
// 长按点击事件
EventUtil.bindEvent(domContent, ‘longpress’, handleLong);
// 接触绑定按钮
let btnTest = document.querySelector(‘#test’);
function removeLeft() {
// 接触左滑事件绑定
EventUtil.removeEvent(domContent, ‘swipeleft’, handleLeft);
}
// 绑定点击事件
EventUtil.bindEvent(btnTest, ‘click’, removeLeft);
</script>
</body>
</html>
测试效果如下: 有疑问的可以留言或发送邮件至 472784995@qq.com。
