智能手机和平板甚至还有一些电脑屏幕自带触屏功能。所以页面就需要对触屏事件进行响应和反馈,不过一般js的触屏事件一般在移动的智能设备上都会添加的事件(touch)。
触摸事件
touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户的手指或者触控笔对屏幕或者触控板操作。
触屏事件常见如下:
触屏事件 | 描述 |
---|---|
touchstart | 手指触摸到第一个DOM元素时触发 |
touchmove | 手指在一个DOM元素滑动时触发 |
touchend | 手指移开DOM元素时触发 |
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.content{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var ele=document.querySelector('.content') ;
ele.addEventListener('touchstart',function () {
console.log('你在触摸我');
})
ele.addEventListener('touchmove',function () {
console.log('你在不停的抚摸我');
})
ele.addEventListener('touchend',function () {
console.log('你离开了');
})
</script>
</body>
</html>
需要将浏览器模式调成手机模式,还有为了体现触摸的效果,需要按住鼠标左键,这样相当于手指或者触屏笔的按压。
触摸事件对象
触摸事件时描述手指在触摸屏幕的状态发生变化的事件。这类事件用于描述一个或多个触电,开发者可以检测出点的移动,出点的增加和减少等。
如果理解呢?你想想你用手触摸手机屏幕的时候,一般是一个手指,但是有时候你会无意中用两个手指触摸屏幕。
而三个事件touchstart,touchmove,touchend三个事件都会有各自的事件对象。
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.content{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var ele=document.querySelector('.content') ;
ele.addEventListener('touchstart',function (event) {
console.log('你在触摸我',event);
})
ele.addEventListener('touchmove',function (event) {
console.log('你在不停的抚摸我',event);
})
ele.addEventListener('touchend',function (event) {
console.log('你离开了',event);
})
</script>
</body>
</html>
单独看事件对象会发现很多属性:
其中重点需要了解的时三个常见属性:
事件属性 | 描述 |
---|---|
touches | 正在触摸屏幕的所有触摸点列表(这个监控的时整个屏幕) |
targetTouches | 正在触摸当前DOM元素上手指列表(这个监控的时当前元素) |
changedTouches | 手指状态发生了变化列表,简单的说从无到有或者从有到无。 |
因为用pc浏览器模拟,鼠标无法演示多个触点,所以上面三个属性都是现实只有一个:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.content{
position: relative;
left: 0px;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var ele=document.querySelector('.content') ;
// 获得元素的初始坐标
var x=0;
var y=0;
//获得鼠标触点的初始坐标
var starx=0;
var stary=0;
ele.addEventListener('touchstart',function (event) {
x=this.offsetLeft;
y=this.offsetTop;
var touch= event.targetTouches[0]
starx=touch.pageX;
stary=touch.pageY;
})
ele.addEventListener('touchmove',function (event) {
this.pr
var touch= event.targetTouches[0]
var endx=touch.pageX;
var endy=touch.pageY;
// 得到触点移动的距离
var movex=endx-starx;
var movey=endy-stary;
this.style.top=(y+movey)+'px';
this.style.left=(x+movex)+'px';
// 防止 屏幕的滑动
event.preventDefault();
})
</script>
</body>
</html>