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

手指移动实时获取当前的最新元素。不是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>

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

移动端touch事件 touchstart、touchmove、touchend
移动端touch事件 touchstart.touchmove.touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发.touchmove事件:当手指 ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
移动端 touch事件过渡事件动画事件
移动端首先要书写meta标签 <meta type="viewport" content="width=device-width,user-scalable=no, ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
使用jquery获取指定id下面的div元素个数
使用js获取指定id下面的div元素个数 html代码 js代码 html代码 <div id="question" > <div class="div ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
还记的我上篇文章实现了图片响应式滑动,如果不知道怎样实现图片在超宽屏幕居中显示,且也不知道怎样实现图片的响应式效果(专门针对移动端的),可以再继续看看我写的这篇文章.狠狠地点击这里那么针对移动端,如 ...
移动端touch事件实现页面弹动--小插件
动手之前的打盹说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

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

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

最新文章

热门文章