1. 网络状态改变事件
H5新增了两个监听网络状改变的事件
- online 网络已连接
- offline 网络已断开
<body>
<script>
// 找到控制台中的network模拟断网-->点击向下的箭头,选择offline 或online就会触发断网,连网事件
window.addEventListener("online", function () {
console.log('网络已连接')
})
window.addEventListener("offline", function () {
console.log('网络断开')
})
</script>
</body>
2. 全屏
HTML5 规范允许用户自定义网页上的任意元素全屏显示
2.1 全屏方法
- Node.requestFullScreen() 开启全屏显示
- document.cancelFullScreen() 关闭全屏显示
- document.fullscreen 检测是否处于全屏(尽量不要用说)
由于兼容问题, 需要加兼容前缀,例如webkit内核浏览器: webkitRequestFullScreen
处理兼容的写法
if(img.requestFullScreen){
img.requestFullScreen()
}else if(img.webkitRequestFullScreen){
img.webkitRequestFullScreen()
}
// ......
full.onclick = function(){
img.webkitRequestFullScreen()
setTimeout(function(){
alert(document.fullscreen)
},2000)
}
<!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>
<div id="fullscreen">
<h1>大家好</h1>
<p>hello world</p>
<button id="full">全屏</button>
<button id="cacelfull">取消全屏</button>
</div>
<script>
full.onclick = function () {//全屏
fullscreen.webkitRequestFullScreen()
//检查是否全屏，全屏返回true 不全屏false。需要有个延迟
setTimeout(() => {
console.log(document.fullscreen)
}, 1000)
}
cacelfull.onclick = function () {//退出全屏
document.webkitCancelFullScreen()
//检查是否全屏，全屏返回true 不全屏false。需要有个延迟
setTimeout(() => {
console.log(document.fullscreen)
}, 1000)
}
</script>
</body>
</html>
2.2 全屏伪类选择器
:fullscreen
<!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>
<style>
#fullscreen:fullscreen h1 {
/*伪类：fullscreen如果处于全屏状态 */
color: red;
}
#fullscreen:fullscreen p {
/*伪类：fullscreen如果处于全屏状态 */
color: yellow;
}
</style>
<body>
<div id="fullscreen">
<h1>大家好</h1>
<p>hello world</p>
<button id="full">全屏</button>
<button id="cacelfull">取消全屏</button>
</div>
<script>
full.onclick = function () {//全屏
fullscreen.webkitRequestFullScreen()
//检查是否全屏，全屏返回true 不全屏false。需要有个延迟
setTimeout(() => {
console.log(document.fullscreen)
}, 1000)
}
cacelfull.onclick = function () {//退出全屏
document.webkitCancelFullScreen()
//检查是否全屏，全屏返回true 不全屏false。需要有个延迟
setTimeout(() => {
console.log(document.fullscreen)
}, 1000)
}
</script>
</body>
</html>
3. 移动端事件
3.1、PC端事件
- onclick 鼠标点击触发
. onmousedown 鼠标按下触发
. onmousemove 鼠标移动触发
. onmouseup 鼠标抬起触发
3.2、移动端触屏事件
- ontouchstart 手指按下触发(相当于mousedown)
. ontouchmove 手指移动触发
. ontouchend 手指抬起触发
3.3、事件监听
- addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定
- 绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
- 冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
- 捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行
3.4、event对象
- 标准事件函数默认的第一个参数
- 是描述发生事件的详细信息
3.5、阻止默认事件
- 事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
- 比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
- e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象
3.6、阻止冒泡
- 在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，比如有时需要复制文本
3.7、获取手指信息
- touches 当前屏幕上的手指列表(所有触点的集合)
. targetTouches 当前元素上的手指列表(触发事件元素上的触点集合) changedTouches 触发当前事件的手指列表 - 获取手指的个数 e.changedTouches.length
- 获取坐标 e.changedTouches[0].pageX
3.8、手指对象的区别
- 在touchend的时候想要获取手指列表，只能用changedTouches
- 原因在于，手指抬起了，也就没有touches(屏幕上的手指个数),targetTouches（元素上的手指个数）了
<!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>
//PC鼠标事件 移动端touch事件
document.onmousedown = function (ev) {//鼠标按下
console.log('onmousedown', ev);
}
document.onmouseup = function (ev) {//鼠标抬起
console.log('onmouseup', ev);
}
document.onmousedown = function (ev) {//一次按下 一次抬起 触发一次单击
console.log('onmouseclick', ev);
}
document.ontouchstart = function (ev) {//手指按下触发
console.log('ontouchstart', ev);
console.log(ev.changedTouches.length)//获取手指个数
}
document.ontouchmove = function (ev) {//手指移动触发
console.log('ontouchmove', ev);
}
document.ontouchendt = function (ev) {//手指抬起触发
console.log('ontouchend', ev);
}
</script>
</body>
</html>
3.9、防止误触问题
- 用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转
<!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>
<style>
#box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//防误触
box.addEventListener( //通过addEventListener绑定了touchmove事件，手指一移动，会给box绑定isMove属性，值为true。
"touchmove",
function () {
this.isMove = true;//定义一个变量来标识用户是否在元素上移动,
})
box.addEventListener(//每次鼠标按下抬起时，判断鼠标是否移动，如果移动可能是误触，不是点击事件。
"touchend",
function () {
//如果是移动就不会走if里边的事件.
if (!this.isMove) {//这里是真正的点击事件 移动了就不是点击事件
// window.location.href = this.href;
console.log('1这里是真正的点击事件')
return;
}
this.isMove = false;
console.log('2误触')
})
</script>
</body>
</html>
3.10 300ms延迟
移动端网页点击历史问题
移动端屏幕小,pc网页大
网页缩小了,双击放大
单机后等待300ms, 判断用户是不是双击
解决300ms延迟 https://github.com/ftlabs/fastclick（链接中有使用方法）借助第三方工具---fastclick方法
<!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>
<style>
#box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
//使用前要先引入FastClick。通过在线的cdn，搜boots cdn--搜fastclick-->复制fastclick的js代码地址
<script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<script>
//防误触解决移动端300ms延迟--借助第三方工具FastClick
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);//FastClick在整个页面生效
}, false);
box.onclick = function () {
console.log(1111);
}
}
</script>
</body>
</html>
注意: touch事件不会等300ms
解决300ms延迟方法二--加上阻止用户点击user-scalable=no，阻止放大相当于阻止了双击
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
4. 其他移动端事件
4.1 tap类事件
触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
4.2. swipe类事件
滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
