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>
測試效果如下:
有疑問的可以留言或發送郵件至[email protected]。