HTML5 移动端手指事件

最新推荐文章于 2024-06-10 17:22:17 发布

gzlxing

最新推荐文章于 2024-06-10 17:22:17 发布

阅读量1.4k

点赞数

文章标签： html5 移动

本文链接：https://blog.csdn.net/qq_40238154/article/details/78724917

版权

手指事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width"/>
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<html>

ontouchstart 手指触摸屏幕

<script>
      var box=document.getElementById('box');
      box.addEventListener('touchstart',function(){
          console.log('111');
      });
</script>

ontouchmove 手指在屏幕上发生移动

<script>
      var box=document.getElementById('box');
      box.addEventListener('touchsmove',function(){
          console.log('222');
      });
</script>

ontouchend 手指离开屏幕

<script>
      var box=document.getElementById('box');
      box.addEventListener('touchend',function(){
          console.log('333');
      });
</script>

手指列表

 changedTouches 目标元素上目标事件上的手指列表
 targetTouches  目标元素上的手指列表
 touches        屏幕上的手指列表


<script type="text/javascript">
    var box = document.getElementById('box');

    box.addEventListener('touchend',function(event){
        //手指距离视口的距离
        //event.changedTouches[0].clientX;
        //event.changedTouches[0].clientY;

        console.log(event.changedTouches[0].clientX,event.changedTouches[0].clientY)

    })

</script>

阻止默认行为

dom0
return false;
dom2
event.preventDefault();

阻止冒泡

event.stopPropagation();

gzlxing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 移动端手指事件

手指事件
复制链接

扫一扫

HTML5 移动端 手指事件

手指事件

HTML5 移动端手指事件