移动端touch事件，实时获取touchmove移动下的最新元素

最新推荐文章于 2023-04-03 13:25:20 发布

AILIHEIHEI

最新推荐文章于 2023-04-03 13:25:20 发布

阅读量1.2k

点赞数 2

文章标签： touchmove 移动端事件 touch

本文链接：https://blog.csdn.net/qq_42780323/article/details/96462145

版权

手指移动实时获取当前的最新元素。不是touchstart的元素。（完整小demo）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验一个移动获取内部数据</title>
    <style>
        .div1{
            width: 100%;
            height:500px;
            background:blue;
        }
        .div1 div:nth-child(2n){
            float:left;
            background:green;
            width: 10%;
            height:400px;
            margin:0 10px;
        }
        .div1 div:nth-child(2n+1){
            float:left;
            background:red;
            width: 10%;
            height:400px;
            margin:0 10px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8

    </div>
</div>
<script>
    var divs=document.getElementsByClassName("div1")[0].getElementsByTagName("div");
    console.log(divs);
    var timer=null;
    for(var i=0;i<divs.length;i++){
        divs[i].ontouchmove=function(e){
            if(timer){
                clearTimeout(timer)
            }
          //timer=setTimeout((e)=>{
                //event.preventDefault();
                e = e || window.event;
                e.stopPropagation();
                var touch=e.targetTouches[0];//位于当前DOM元素上的手指的一个列表。（可以）
               // var touch = e.touches[0];  //touches ：当前位于屏幕上的所有手指的一个列表。(可以)
                //var touch=e.originalEvent.touches[0]; //不知道为什么不行
                var ele = document.elementFromPoint(touch.pageX, touch.pageY);

                console.log(ele.innerText);
           // },10);

        }
    }

</script>
</body>
</html>

AILIHEIHEI

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端touch事件，实时获取touchmove移动下的最新元素

手指移动实时获取当前的最新元素。不是touchstart的元素。（完整小demo）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实验一个移动获取内部数据</title> <style> ...
复制链接

扫一扫