javascript移动端事件

39 阅读1分钟

触摸事件

image.png

image.png

image.png

touches 触摸屏幕的手指列表, targetTouches 目标元素上的手指列表

image.png

经常使用的是targetTouches

image.png

补充知识1

定义

一、clientX、clientY 点击位置距离当前body可视区域的x,y坐标。 可以理解为距离浏览器窗口的距离,但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。

二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度 相对于文档边缘,包含滚动条距离

三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标

四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标

image.png

补充知识2

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。


     <style>
        body{
            position: relative;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50px;
            top:50px;
        }
     </style>
</head>
<body>
    <div class="box"></div>

  <script>
        let btn =document.querySelector('div')

        btn.addEventListener('click',function(e){
           console.log(this.offsetLeft);
           console.log(this.offsetTop);
           console.log(this.offsetWidth);
           console.log(this.offsetHeight);
        })
  </script>
</body>

image.png

image.png