SF上,有个问题想请教一下,一般类似于微信那样的,双击屏幕回到顶部是怎么做的呀?
刚开始我回答的直接是:

1
2
3
4
// 原生JS、PC端可以在`body`上添加双击事件
document.addEventListener('dblclick', function(){
window.scrollTo(0, 0);
});

在PC端测试了下,没问题。然后再看到别人的回答,似乎好像在移动端不起作用。于是用Chrome浏览器的移动端模拟试了下果然没用。
然后百度搜索了下,看到两篇文章移动手机端不能触发jQuery双击事件dblclick解决方法
双击事件dblclick在移动端不起作用?
加上了下面的答案。测试通过。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 移动端双击不起作用。
// 可以用单击事件模拟
var touchTime = Date.now();
function handleClick(){
if( Date.now() - touchTime < 800 ){
window.scrollTo(0, 0);
}else{
//如果第二次点击在第一次点击0.8秒后,
//则第二次点击默认为下一次双击判断的第一次点击
touchTime = Date.now();
}
}
document.addEventListener('click', handleClick);

那么问题又来了,我知道直接在document上挂载事件是正确的。但为什么不用document.body呢,我一下说不上来。document.body是<body></body>。是只适用于HTML对象的DOM对象。类似这样的还有

1
2
3
4
5
6
document.images -- 当前页面中所有图片的集合。等价于Core DOM组件中的document.getElementsByTagName('img')调用。
document.applets -- 等价于document.getElementsByTagName('applets')。
document.links -- 是一个列表,包含了页面中所有的`<a href="..."></a>`标签,也就是页面中所有含有`href`属性的A标签。
document.anchors -- 是包含所有带name熟悉的链接。即`<a name="..."></a>`
document.forms -- 用的比较广泛。forms标签的集合。document.forms[0] === document.getElementsByTagName('form')[0]
// 以上只适用于`HTML`对象的`DOM`对象内容,摘抄于《JavaScript面向对象编程指南 · 第2版》

我们常见的获取元素是document.querySelector('body')document.getElementById(),或者document.getElementsByClassName(),document.getElementsByTagName(),document.getElementsByName()等。
于是我谷歌了一下,documentdocument.body却出来了document.ducumentElement的对比。
我们知道document.documentElementHTML节点。

1
2
3
4
5
6
Object.prototype.toString.call(document)
"[object HTMLDocument]"
Object.prototype.toString.call(document.body)
"[object HTMLBodyElement]"
Object.prototype.toString.call(document.documentElement)
"[object HTMLHtmlElement]"

1
2
3
4
5
var divNode = document.createElement('div');
document.appendChild(divNode);
// 报错:
// VM396:1 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
document.body.appendChild(divNode);

我翻了翻w3c规范
W3C 标准内容列表
1.文档对象模型(核心)级别1

1
2
3
4
Object.getOwnPropertyDescriptors(document);
// {location: {}}
document.location === window.location;
// true

未完待续…

本文地址: https://lxchuan12.github.io/2017/12/04/20171204-mobile pc dblclick/