移动端------移动事件对象

Posted 2023-05-10

参考技术A 在移动端，用户每时每刻都在触发移动事件，比如触摸的事件，点击，长按，左右滑动的事件，手指缩放，等等。都是移动事件的对象。在pc端，我们的事件对象是和鼠标和键盘的事件处理监听等等。我们首先是要通过DOM0级和DOM二级来进行绑定事件处理对象。在绑定事件的时候，我们可以在事件的回调函数来进行传参进行事件对象的调用。也可以通过Window对象来调用。这样，可以在pc端兼容问题。var e = ev || event. 在移动端，我们的移动事件对象，是通过在事件的回调函数中传参就可以了。这个是标准做法。我们通过事件对象，可以找到，我们需要的事件对象的坐标点。和具体的坐标。还有触发事件的对象，特别是在移动端的事件中，我们更需要事件对象的各种属性 ，来进行相关操作。这个是与pc端不一样的地方。

移动端的事件的绑定方法是通过DOM二级来进行。DOM二级来绑定事件，有很多优势。可以绑定多个同样的事件。不会发生覆盖。其二是，在事件名可以绑定多个不一样的事件。这样，我们的移动端就采用了DOM二级来进行绑定事件。

emlent.addEventListen（"事件名",function（ev）

// 具体要操作的内容。

）;

移动端的事件常见的是：touchstart   touchmove  touchend tap hold   drag  -----

都是通过DOM二级来进行绑定，这些事件。

我们来看看移动端的事件对象。我们可以通过事件对象下的targettouches 来找到我们需要的事件的相关方法和属性。而事件对象的targettouches是个类数组的结构，所以，我们如果是一个手指的触发的事件，我们需要通过数组的形式来进行访问具体的事件属性。写法如下：var touch  =  e.targetTouches[0]; 这样，就可以通过这样的形式来进行拿到具体的属性和我们事件触发的具体的坐标值。

在touch下，有我们的需要的关键属性：

clientX:413.43798828125        // 这是我们需要用到的,事件触发的元素的到视口的水平方向的距离。

clientY:284.81298828125       //这是事件触发元素到视口的垂直方向的距离。

force:1

identifier:0

pageX:413.43798828125

pageY:284.81298828125

radiusX:35.21875

radiusY:35.21875

rotationAngle:0

screenX:424

screenY:237

target:保存的是触发事件元素。事件代理的通过来通过该属性获取的是触发事件对象。

js移动端触摸事件

touchstart : 手指触摸dom元素事件
tochmove ：手指拖动dom元素事件
touchend :手指离开dom元素事件
事件对象重要的三个触摸列表
touches 触摸屏幕上所有触摸点(手指)的列表
targetTouches dom元素上所有触摸点的列表
changeTouches 手指状态发生了改变，从无到有，从有到无的变化

例子：移动盒子

<script>
        window.addEventListener('load',function()
            var box = document.querySelector('div');
            var startX = 0;//手指的初始位置
            var startY = 0;
            var x = 0;//盒子的初始位置
            var y = 0;
            box.addEventListener('touchstart',function(event)
                 startX = event.targetTouches[0].pageX;
                 startY = event.targetTouches[0].pageY
                 x = this.offsetLeft;
                 y = this.offsetTop;
                 
            )
            box.addEventListener('touchmove',function(event)
                var endX = event.targetTouches[0].pageX;
                var endY = event.targetTouches[0].pageY;
                box.style.left = endX - startX + x +'px';
                box.style.top = endY - startY + y + 'px';
                event.preventDefault();//防止屏幕滚动的默认行为
            )
        )
    </script>