js---移动端触摸事件

最新推荐文章于 2024-04-25 13:44:27 发布

沐浴前端

最新推荐文章于 2024-04-25 13:44:27 发布

阅读量717

点赞数 1

分类专栏： JavaScript 文章标签：触屏touch事件触摸事件对象(touchEvent) 移动拖拽元素 classList属性

本文链接：https://blog.csdn.net/weixin_44976833/article/details/100868919

版权

JavaScript 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

触摸事件

1.触屏touch事件

touch对象代表一个触摸点,触摸点可能是一根手指,或者一根触摸笔,触屏事件可响应用户手指或者触屏笔对屏幕或者触控板操作;

//触屏touch事件
//手指触摸到一个DOM元素时触发
touchstart;
//手指在一个DOM元素上滑动时触发
touchmove;
//手指从一个DOM元素上移开时触发
touchend;

2.触摸事件对象(touchEvent)

//触摸列表
//1.正在触摸屏幕所有手指的一个列表
touchs;
//2.正在触摸当前DOM元素上的手指的一个列表
targetTouchs;
//3.手指状态发生改变的列表,从无到有,从有到无变化
changedTouchs;

3.移动端拖动元素

1.touchstart, touchmove, touchend可以实现拖动元素;

2.但是拖动元素需要当前手指的坐标值,可以使用targetTouchs[0]里面的pageX和pageY;

3.移动端拖动的原理:手指移动中,计算出手指移动的距离,然后用盒子原来的位置+手指移动的距离;

4.手指移动的距离:手指滑动中的位置 - 手指刚开始的位置;

拖动元素三步:

1.触摸元素touchstart : 获取手指初始坐标,同时获得盒子原来的位置;

2.移动手指touchmove: 计算手指的移动距离,并且移动盒子;

3.离开手指touchend

拖动元素案例 :必须在移动端,必须在移动端,必须在移动端

   //必须在移动端,拖动元素案例 
	div {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: green;
            border-radius: 50%;
        } 	 
<body>
    <div></div>
	<script>
    // 1.触摸元素  touchstart:  获取元素手指初始坐标,同时获得和儿子原来位置
    // 2.移动手指 touchmove 计算手指的滑动距离
    // 3.离开手指  touchend
    var div = document.querySelector('div');
    var startX = 0;  //获取手指初始坐标
    var startY = 0;  
    //盒子原来的位置
    var x = 0;
    var y = 0;
    div.addEventListener('touchstart',function(e){
        //获取手指的位置
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
        x = this.offsetLeft;
        y = this.offsetTop;
    })
    div.addEventListener('touchmove',function(e){
        //计算手指移动的距离 : 手指移动之后的坐标减去手指初始的坐标
        var moveX = e.targetTouches[0].pageX - startX;
        var moveY = e.targetTouches[0].pageY - startY;
        // 移动我们的盒子  盒子原来的位置 + 手指移动的距离
        this.style.left = x + moveX + 'px';
        this.style.top = y + moveY + 'px';
        e.preventDefault(); //阻止屏幕滚动的默认行为
    })
</script>
</body>

4.classList属性

classList属性是H5新增的一个属性,返回元素的类名,ie10以上支持;

//1.添加类
element.classList.add('类名');
//2.移除类
element.classList.remove('类名');
//3.切换类
element.classList.toggle('类名');

沐浴前端

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js---移动端触摸事件

触摸事件1.触屏touch事件touch对象代表一个触摸点,触摸点可能是一根手指,或者一根触摸笔,触屏事件可响应用户手指或者触屏笔对屏幕或者触控板操作;//触屏touch事件//手指触摸到一个DOM元素时触发touchstart;//手指在一个DOM元素上滑动时触发touchmove;//手指从一个DOM元素上移开时触发touchend;2.触摸事件对象(touchEvent...
复制链接

扫一扫