移动开发——事件对象，对象属性及拖拽，横向滑屏案例

爱被打了一巴掌 2022-12-18 09:59 58阅读 0赞

# 事件类型 #

*  touchstart 元素上触摸开始时触发
 *  touchmove 元素上触摸移动时触发
 *  touchend 手指从元素上离开时触发
 *  touchcancel 触摸被打断时触发

# 事件绑定 #

方式一

box.ontouchstart = function(){ 
        console.log('touch start')
    }

方式二

box.addEventListener('touchstart', function(){ 
    	console.log('touch start')
    })

这里推荐使用第二种，第一种有时会失灵。

# 点击穿透 #

touch 事件结束后会默认触发元素的 click 事件，如没有设置完美视口，则事件触发的时间间隔为 350ms 左右，如设置完美视口则时间间隔为 5ms 左右。

如果 touch 事件隐藏了元素，则 click 动作将作用到新的元素上，触发新元素的 click 事件或页面跳转，此现象称为点击穿透

## 解决方法 ##

### 1. 阻止当前元素事件的默认行为。 ###

cls.addEventListener('touchstart', function(e){
    	e.preventDefault();
    })

### 阻止顶级元素事件的默认行为，可以增加一个包裹元素绑定，也可以给 document 和 window 绑定，不过需要关闭被动模式 ###

document.addEventListener('touchstart', function(e){
    e.preventDefault();

\}, \{  
passive: false  
\});

### 3.使用非链接的元素代替 a 标签，并绑定 touchstart 事件 ###

### 4.利用事件绑定第三个参数 ###

close.addEventListener('touchstart', function(e){
            //隐藏
            zhezhao.style.display = 'none';
        });
    
        //绑定
        document.documentElement.addEventListener('touchstart', function(e){
            //阻止默认行为
            e.preventDefault();
        },{
            passive:false
        });

### 5.延时隐藏遮盖元素 ###

setTimeout(function(){
    	el.style.display = 'none';
    }, 400)

# 浏览器默认行为 #

这里指的浏览器默认行为主要有两个

*  滑动露白
 *  页面缩放
    
        close.addEventListener('touchstart', function(e){
              //隐藏
              zhezhao.style.display = 'none';
          });
        
          //绑定
          document.documentElement.addEventListener('touchstart', function(e){
              //阻止默认行为
              e.preventDefault();
          },{
              passive:false
          });

## 阻止默认行为以后会引起的问题 ##

*  链接失效
 *  内容无法选择
 *  form 元素无法获得焦点

## 解决办法 ##

产生『后遗症』的原因在于 touchstart 阻止了默认行为，后续所有的操作都已经失效。解决问题只需要给目标元素绑定 touchstart 事件并阻止事件冒泡，这样当前操作的默认行为仍然可用。

var link = document.getElementsByTagName('a')[0];
    link.addEventListener('touchstart', function(e){
    	e.stopPropagation();
    })

# 事件对象属性 #

touch 事件对象中有 3 个非常重要的属性

*  changedTouches 为当前在元素上同时**按下/滑动/抬起**的触点对象数组。
 *  targetTouches 当前元素上的触点对象数组
 *  touches 为滑动时，当前屏幕上所有的触点对象数组

## 触点对象 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]

# 小案例 #

*编写代码的心得：注意利用对象或者关键词this来声明变量，计算的时候要用var声明*

## 拖拽 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 1]

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> *{ margin:0; padding:0; } ul{ list-style:none; } #box{ width:100px; height:100px; background:darkred; color:white; position:absolute; left:0; top:0; /*background:rgb(200,241,200);*/ } </style>
    </head>
    <body>
        <div id="box">
    
        </div>
        <script> var box = document.querySelector('#box'); box.addEventListener('touchstart', function(e){ //获取按下时触点的位置 尺寸 1 this.size1 = e.touches[0].clientX; //获取按下时 元素距离左侧的偏移量 2 this.size2 = box.offsetLeft; this.size1Y = e.touches[0].clientY; this.size2Y = box.offsetTop; }); box.addEventListener('touchmove', function(e){ this.size3 = e.touches[0].clientX; //获取移动后的触点的位置 this.size3Y = e.touches[0].clientY; var size4 = this.size3 - (this.size1 - this.size2); var size4Y = this.size3Y - (this.size1Y - this.size2Y); //获取最大的left 的值 var maxLeft = document.documentElement.clientWidth - box.offsetWidth; //检测水平方向的位置 if(size4 <= 0){ size4 = 0; } if(size4 >= maxLeft){ size4 = maxLeft; } //设置css left 的值 box.style.left = size4 + 'px'; box.style.top = size4Y + 'px'; }); box.addEventListener('touchend', function(e){ }); document.body.addEventListener('touchstart', function(e){ e.preventDefault(); },{ passive: false }); </script>
    </body>
    </html>

## 横向滑屏 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 2]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style> *{ margin: 0; padding: 0; } html,body,#app{ width:100%; height: 100%; overflow: hidden; background: #a88; } #app{ position: relative; } #box{ position: absolute; } </style>
    </head>
    <body>
      <div id="app">
        <div id="box">
    
        </div>
      </div>
      <script> var box = document.querySelector("#box"); var app = document.querySelector("#app"); var str = ''; for(var i=0;i<100;i++){ str += i + '<br>'; } box.innerHTML = str; app.addEventListener("touchstart",function(e){ box.point1y = e.touches[0].clientY; box.boxtop = box.offsetTop; }) app.addEventListener("touchmove",function(e){ box.point2y = e.touches[0].clientY; var newTop = box.point2y-box.point1y+box.boxtop; //不能向下划 if(newTop >= 0){ newTop=0; } var minTop =app.offsetHeight - box.offsetHeight; if(newTop<=minTop){ newTop = minTop; } box.style.top = newTop + 'px'; }) </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/6b66fb3680ce4306924275ddfd9b4aa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/1f5321f7069f4089a277c7c5d8422db7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/cc37d9c840664aa39b965d5ca881ffb7.png