H5移动端常用事件，此中大有文章

Myth丶恋晨 2022-10-09 15:23 128阅读 0赞

### 移动端事件，封装自定义事件 ###

*   *  1. 移动端事件
     *  2. 封装移动端自定义事件
     *  3. FAQ

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

## 1. 移动端事件 ##

*  首先，**移动端不建议使用 click 事件**
 *  因为它有300毫秒的延迟，对用户体验不太友好

> 常用事件：**touchstart()，touchend()，touchmove()**

**HTML文件**

<!DOCTYPE html>
    <html lang="ZH-cn">
        <head>
            <meta charset="utf-8">
            <title>标题</title>
            <meta name="viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no"/>
        </head>
        <style>
            *{ 
                margin: 0;
                padding: 0;
            }
            html,body{ 
                height: 100%;
            }
            .con{ 
                height: 300px;
                width: 200px;
                color: white;
                background: green;
            }
    
        </style>
        <body>
            <h1>移动端事件</h1>
            <button 
                class="touchstart"
                id="touchstart"
            >
                    点击我
            </button>
            <div class="con" id="con">
               
            </div>
        </body>
    </html>

**JS部分**

*  大家可以先试一下效果，复制代码即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

## 2. 封装移动端自定义事件 ##

*  众所周知：**低版本安卓手机上是没有touch类事件的**
 *  所以我们只能自己封装

> **2.1 封装移动端单击与长按事件**

> **2.2 封装左侧滑动与右侧滑动**

slideLeft: function (hanler){ 
                this.ele.addEventListener("touchstart", touchFn);
                this.ele.addEventListener("touchend", touchFn);
                var startX, startY, endX, endY;
    
                function touchFn(e){ 
                    e.preventDefault();
                    // console.log(e.changedTouches);
                    var firstTouch = e.changedTouches[0];
                    switch (e.type){ 
                        case "touchstart":
                            startX = firstTouch.pageX;
                            startY = firstTouch.pageY;
                            break;
                        case "touchend":
                            endX = firstTouch.pageX;
                            endY = firstTouch.pageY;
                            // x方向移动的距离大于Y（定义为左滑操作）并且移动距离超过了25px
                            
                            if ( Math.abs(endX - startX) >= Math.abs(endY -startY) && startX - endX >= 25){ 
                                hanler.call(this, e)
                            }
                            break;
                    }
                }
            }

## 3. FAQ ##

*  浏览器切换为手机模式下运行
 *  或者真机调试都可以

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221005/b0c9a3e1928043a3a7d2b2139dccd9d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221005/c8bbf1b5c9dc4fe9940149af708c8690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221005/94fc220b66974d92be607a95752e7ea3.png