触摸式设备也拥有鼠标事件
目录
移动端的主要事件
- touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
- touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
- touchend：当手指从屏幕上移开时触发。
- touchcancel：当系统停止跟踪触摸时触发。
上面这几个事件都会冒泡，也都可以取消。这些触摸事件没有在DOM 规范中定义，但却是以兼容DOM 的方式实现的。因此，每个触摸事件的event 对象都提供了在鼠标事件中常见的属性： clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey。
移动端事件的触发对象
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
- touches：表示当前跟踪的触摸操作的Touch 对象的数组。
- targetTouches：特定于事件目标的Touch 对象的数组。
- changedTouches：表示自上次触摸以来发生了什么改变的Touch 对象的数组。
注意：移动端屏幕大多支持多点触控, 所以触摸事件的触发对象可能会有多个 。
移动端事件对象的位置属性
每个Touch 对象包含下列属性：
- clientX：触摸目标在视口中的x 坐标。
- clientY：触摸目标在视口中的y 坐标。
- identifier：标识触摸的唯一ID。
- pageX：触摸目标在页面中的x 坐标。
- pageY：触摸目标在页面中的y 坐标。
- screenX：触摸目标在屏幕中的x 坐标。
- screenY：触摸目标在屏幕中的y 坐标。
- target：触摸的DOM 节点目标。
使用这些属性(该位置属性与PC的位置属性相同)可以跟踪用户对屏幕的触摸操作
移动端事件的触发顺序
注意：手指滑动事件一旦触发,将不会在激活鼠标事件
其他事件对象
阻止浏览器默认行为
阻止目标元素在某种事件下默认执行的行为。如a标签的跳转，鼠标右击产生菜单栏，点击submit进行提交，滚动时滑动页面......，可以使用preventDefault()方法或者return false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端事件</title>
</head>
<body>
<div id="box1" style="width: 600px;height: 1200px;">
<button id="ts" style="background-color: rgba(0, 100, 0, 0.309);">touchstart</button>
<button id="tm" style="background-color: rgba(93, 100, 0, 0.378);">touchmove</button>
<button id="te" style="background-color: rgba(100, 53, 0, 0.453);">touchend</button>
<button id="tc" style="background-color: rgba(0, 77, 100, 0.474);">touchcancel</button>
<button id="ms" style="width: 200px; height: 30px; background-color: rgba(100, 0, 55, 0.412);">右击</button>
</div>
<script>
var box1 = document.querySelector('#box1');
var ts = document.querySelector('#ts');
var tm = document.querySelector('#tm');
var te = document.querySelector('#te');
var tc = document.querySelector('#tc');
var ms = document.querySelector('#ms');
ts.ontouchstart = function (ev) {
console.log('touchstart事件被触发');
console.log(ev);
console.log(ev.touches);
console.log(ev.targetTouches);
console.log(ev.changedTouches);
}
tm.ontouchmove = function (ev) {
console.log('touchmove事件被触发');
ev.preventDefault(); // 当内容区有滚动条的时候可以阻止滚轮页面
}
te.ontouchmove = function (ev) {
console.log('touchend事件被触发');
}
tc.ontouchmove = function (ev) {
console.log('touchcancel事件被触发');
}
ms.oncontextmenu = function (ev) {
console.log(ev);
console.log('鼠标右击事件触发');
// 阻止浏览器默认事件
return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。
}
</script>
</body>
</html>