JavaScript touch 事件 touchstart touchmove touchend
程序员文章站
2024-01-24 17:33:58
...
JavaScript touch 事件 touchstart touchmove touchend
MDN 官方文档: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
一、touch 事件有哪些
页面中的 touch
事件一般在移动端使用,pc
端是没有效果的。touch
相关的事件有四个
-
touchstart
触摸开始 -
touchmove
触摸移动中 -
touchend
触摸结束 -
touchcancel
触摸取消
二、如何使用
只需要给你需要添加触摸方法的 dom
元素添加对应的事件监听即可。
具体的操作需要根据 event
中的属性来操作,后面细说。
document.addEventListener('touchstart', event => {
console.log('touchstart')
}, false)
document.addEventListener('touchmove', event => {
console.log('touchmove')
}, false)
document.addEventListener('touchend', event => {
console.log('touchend')
}, false)
二、相关的对象,用到的事件属性
先来看一下事件 event 的一些属性:
在 touchstart
和 touchmove
的 event
里面都会有一个 touches
对象,这是个数组,记录了触摸的个数和对应的在页面中的位置。而在 touchend
中就没有这个 touches
对象。
看一下 touches
对象的具体属性:
所以我们在方法中就能实时获取当前触摸的位置,有了 x
y
就可以做我们想做的事了。
三、实现一个触摸移动 dom 元素的实例
做一个页面,页面里面有 n 个方块,手机上拖动方块可以移动其位置。
我们需要做的:
-
body
的position
定义为relative
,方块的position
定义为absolute
- 然后给 documnet 添加那三个 touch 事件:
touchstart
touchmove
touchend
- 在方法内部,判断被触摸的元素是不是方块,避免把 body 也拖动了。如果是方块就拖动,如果不是就不拖动。
window.onload = () => {
$('body').style.height = window.innerHeight + 'px';
init();
}
function init(){
document.addEventListener('touchstart', event => {
console.log(event);
let touch = event.touches[0];
console.log('start:', touch.pageX, touch.pageY)
}, false)
document.addEventListener('touchmove', event => {
// 只移动 .square dom
if (event.target.classList.contains('square')){
let touch = event.touches[0];
console.log('move:', touch.pageX, touch.pageY)
move(event.target, touch);
}
}, false)
document.addEventListener('touchend', event => {
console.log('end:')
}, false)
}
function move(item, touch){
let width = item.offsetWidth;
let height = item.offsetHeight;
item.style.left = touch.pageX - width/2 + 'px';
item.style.top = touch.pageY - height/2 + 'px';
}
function $(selector){
return document.querySelector(selector)
}
四、效果
上一篇: #机器学习--第2章:特征工程
下一篇: 数据结构(栈和队列的链表方式实现)
推荐阅读
-
mpvue vue touchstart touchend touchmove事件实现按住录音,上滑取消,下拉恢复 仅样式
-
JavaScript touch 事件 touchstart touchmove touchend
-
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
-
移动端事件(touchstart+touchmove+touchend)
-
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
-
HTML5触摸事件(touchstart、touchmove和touchend)的实现
-
HTML5主要的触摸事件(touchstart、touchmove和touchend)
-
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
-
HTML5触摸事件(touchstart、touchmove和touchend)的实现
-
js实现touch移动触屏滑动事件_javascript技巧