If who diligently to find, the easier it is to lose yourself. All who are all sin.
Explain how to tap event package moving end, that is the end of the click event pc
- Why package:
- First why the tap event package
- Because there is a delay of 300ms in the mobile terminal click event, the user experience is not good,
- So we move according to three time classes end package a tap (collectively) event
- Requirements:
- When tap event occurs, the event can not trigger touchmove
- Touchend time of occurrence - the time of occurrence toouchstart <150ms
- Mobile end of a tap event:
- Element event occur @param {Object} el
- @param {Function} fn event handler
Code :
<script>
// 1. 首先为什么封装轻敲事件
// 因为在移动端click事件会有300ms 的延迟,用户体验不好,
// 所以我们根据移动端的三大时间类封装一个tap(统称)事件
// 2. 需求需求
// 在tap事件发生的时候,不能触发touchmove 事件
// touchend发生的时间 --- toouchstart发生的时间 < 150ms
function tap(ele, fn) {
var startTime;
var flag = false;
// 在轻敲事件开始的时候记录一下时间 由于后面也要使用,所以使用全局变量
ele.addEventListener('touchstart', function() {
// 将获取的时间转化为时间戳
startTime = new Date().getTime();
console.log(startTime); // 1533460365267
});
// 在tap事件发生的时候,不能触发touchmove 事件,这该怎么办呢?
// 知道 flag 吗? 来一个开关
ele.addEventListener('touchmove', function() {
// 如果进入这里面的话,将开关重新赋值
flag = true;
});
// 当手指与屏幕离开的时候
ele.addEventListener('touchend', function() {
// 记录结束的时间
var endTime = new Date().getTime();
// 怎样才能出发轻敲事件呢? 是不是得使 tap 的条件成立
if (flag == false && endTime - startTime < 150) {
fn();
}
})
}
var html = document.documentElement;
tap(html, function(e) {
console.log(e);
console.log(this);
});
</script>
The above package is good, but there are a lot of details
- When you call a function of time if there is no tangible reference arguments parameter value undefined, undefined if it is not the time it will error, so what? Judge
- Observe the code here and above what is the difference
ele.addEventListener('touchend', function() {
// 记录结束的时间
var endTime = new Date().getTime();
// 怎样才能出发轻敲事件呢? 是不是得使 tap 的条件成立
if (flag == false && endTime - startTime < 150) {
fn && fn();
// 这是什么意识,js中的并且运算符,两边都为真的时候,才能够触发,
}
})
Another problem is the problem of nodes, js the most common three nodes: text nodes, element nodes, attribute nodes
So ~ ~ we have to be judged in one step
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 首先为什么封装轻敲事件
// 因为在移动端click事件会有300ms 的延迟,用户体验不好,
// 所以我们根据移动端的三大时间类封装一个tap(统称)事件
// 2. 需求需求
// 在tap事件发生的时候,不能触发touchmove 事件
// touchend发生的时间 --- toouchstart发生的时间 < 150ms
function tap(ele, fn) {
// 如果el身上有nodeType属性 并且属性值为1的话
if (ele.nodeType && ele.nodeType == 1) {
var startTime;
var flag = false;
// 在轻敲事件开始的时候记录一下时间 由于后面也要使用,所以使用全局变量
ele.addEventListener('touchstart', function() {
// 将获取的时间转化为时间戳
startTime = new Date().getTime();
console.log(startTime); // 1533460365267
});
// 在tap事件发生的时候,不能触发touchmove 事件,这该怎么办呢?
// 知道 flag 吗? 来一个开关
ele.addEventListener('touchmove', function() {
// 如果进入这里面的话,将开关重新赋值
flag = true;
});
// 当手指与屏幕离开的时候 // 这里的 e 是浏览器传进来的事件对象,
ele.addEventListener('touchend', function(e) {
// 记录结束的时间
var endTime = new Date().getTime();
// 怎样才能出发轻敲事件呢? 是不是得使 tap 的条件成立
if (flag == false && endTime - startTime < 150) {
// 因为是自己调用的自己,没有事件对象,那该怎么办呢?谁有事件对象? touchend 有,手指离开那个元素,这就是事件对象
// 这里是函数调用 , 所以这里的 e 是实参
// 还需要是函数调用的时候,将这个this指向这个事件对象
fn && fn.call(ele, e);
}
})
} else {
// 进行一个警告
console.warn('轻敲事件的第一个参数必须是元素对象类型');
}
}
var html = document.documentElement;
// 注意这里的函数只是一个普通函数,没有事件对象,如果我们信息网有一个事件对象,哪该怎么办呢?
// 是不是应该在调用的时候传进来呢! 这里是形参
tap(html, function(e) {
console.log(e);
console.log(this);
});
</script>
</body>
</html>
Well, tap an event to take a good look at the package !!!.
Here I enclose my QQ: 2489757828 a problem, then you can explore with
my private blog: Lida Xuan