标签：web console log 触发 触摸 前端 事件 ev 三剑客
触摸式设备也拥有鼠标事件
目录
移动端的主要事件
- 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>标签：web,console,log,触发,触摸,前端,事件,ev,三剑客 来源： https://blog.csdn.net/JBY2020/article/details/118635175
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。