H5移动端事件详细介绍

电玩女神 2023-03-03 04:58 114阅读 0赞

# 1、PC端与移动端H5事件对比 #

###    1）PC端事件： ###

onclick鼠标点击触发  
onmousedown鼠标按下触发  
onmousemove鼠标移动触发  
onmouseup鼠标抬起触发

代码块：

// PC端的拖拽事件
            let Obox=document.querySelector("#box");
            //按下事件
            Obox.onmousedown=function(e){
                console.log(e);
                console.log("pc按下");
                //移动事件,写在按下事件里面，因为是按下-移动-抬起
                Obox.onmousemove=function(e){
                    console.log(e);
                    console.log("pc移动");
                }
                //抬起事件
                Obox.onmouseup=function(e){
                    console.log(e);
                    console.log("pc抬起");
                    //需要清除移动和抬起事件
                    Obox.onmousemove=Obox.onmouseup=null;
                }
            }

### 2）移动端触屏事件 ###

ontouchstart手指按下触发  
ontouchmove手指移动触发  
ontouchend手指抬起触发

代码块：

//移动端事件
            let Obox=document.querySelector("#box");
    
            //手指按下触发
            Obox.ontouchstart=function(e){
                console.log(e);
                console.log("移动端事件：手指按下触发");
    
                //手指移动触发
                Obox.ontouchmove=function(e){
                    console.log(e);
                    console.log("移动端事件：手指移动触发")
                }
                 //手指抬起触发
                 Obox.ontouchend=function(e){
                    console.log(e);
                    console.log("移动端事件：手指抬起触发")
                }
            }

### 3）移动端采用：事件监听addEventListener ###

代码块：

//移动端事件 手指按下 移动 抬起
            //手指按下触发
            Obox.addEventListener("touchstart",function(e){
              console.log("移动端事件：手指按下触发");
            });
            //手指移动触发
            Obox.addEventListener("touchmove",function(e){
              console.log("移动端事件：手指移动触发")
            });
              //手指抬起触发
              Obox.addEventListener("touchend",function(e){
              console.log("移动端事件：手指抬起触发");
            });

**原因：**

原因之一：

//移动端事件在谷歌浏览器中使用监听事件的原因如下：
            //1、通过on的方式添加touch事件在谷歌浏览器下无效，在火狐浏览器下生效
            let Obox=document.querySelector("#box");
            Obox.ontouchstart=function(){
                console.log("点击1");
            };
            Obox.ontouchstart=function(){
                console.log("点击2");
            };
            //2、通过以上的代码可以知道，同一个事件在火狐浏览器中，通过on方式添加事件是会被覆盖掉的，即执行最后一个事件
            //3、通过on方式添加不同的事件，在火狐浏览器中不会被覆盖掉
            Obox.ontouchmove=function(){
                console.log("点击3");
            };

原因之二：  
addEventListener事件绑定多少个事件它就执行多少个事件，并且在谷歌一直被识别,且编译顺序从上往下

为什么移动端使用：touch事件,PC端使用:onclick事件

let Obox=document.querySelector("#box");
       Obox.onmousedown=function(e){
           console.log("pc端点击事件");
       };
       Obox.ontouchstart=function(){
           console.log("移动端按下事件");
       };
       //通过以上代码可以看出，鼠标事件可以在移动端使用，但会有300ms的延迟
       //（因为先执行了移动端的按下事件，后执行了pc端的点击事件）,按正常的逻辑应该是先执行点击事件，后执行移动端的按下事件
       //解决方法：一般使用fastclick.js解决移动端浏览器的300ms延迟问题
       //fastclick是专门解决移动端浏览器300ms延迟点击事件的问题所开发的一个轻量的库
       //fastclick.js:检测到touchendd事件的时候，会通过DOM自定义事件立即触发模拟 一个click事件，并把浏览器在300ms之后真正大的click事件阻止掉

### 4）总结 ###

PC端事件：  
用on方式添加touch事件在谷歌浏览器下无效  
用on方式添加事件会被覆盖  
鼠标事件在移动端可以使用，但是有300毫秒的延迟

移动端触屏事件：  
addEventListener(‘不带on的事件名’,事件函数,是否冒泡)事件绑定  
addEventListener绑定多少事件就执行多少个，不会存在前后事件覆盖的问题  
addEventListener绑定touch事件在谷歌浏览器下一直识别

# 2、阻止默认事件 #

事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情  
比如正常情况下，鼠标可以拖拽图片，a标签可以跳转，手指长按可以选中文字，右键菜单，提交表单等。  
e.preventDefault()阻止默认行为  
但是阻止之后网页上的所有滚动条会失效，一般不会阻止默认

<div id="test">
            <a href="https://www.baidu.com">a标签跳转：文字复制</a>
        </div>
        <script>
            //从chrom 56版本开始，在windows,document和body上面注册的3个移动端事件处理函数中调用e.prevenrDrfault()
            //但是会被浏览器忽略掉，且不会阻止默认行为，控制台还会报错
            let Obox=document.querySelector("#test  a");
            Obox.addEventListener("touchstart",function(e){
                e.preventDefault();
                //阻止默认事件
            },{passive:false});

# 3、阻止冒泡 #

事件冒泡：由内往外  
事件捕获：由外往内  
如果同时存在捕获和冒泡时，捕获的优先级高于冒泡。

# 4、阻止默认 #

在需要的时候，标准用e.stopPropagation( ) 阻止冒泡问题，比如有时候需要手指长按复制文本  
user-select: none; css可以阻止复制文本  
document.onselectstart= function()\{return false\}; js阻止选中文本（ //代码简写 document.οnselect=()=>false）

# 5、获取手指信息 #

let Oapp=document.querySelector("#app");
            Oapp.addEventListener("touchstart",function(e){
                console.log(e);
            });

# 6、获取设备信息 #

获取设备信息的作用：当用户访问一个网页的时候，可以获取用户的设备信息，返回相应的网站页面（一个官网的网页都会使用移动端和PC端两套代码书写，很少使用响应式布局来书写，因为响应式布局比较麻烦，也无法判断网页是该返回移动端的网页还是Pc端的网站。  
）

let Oapp=document.querySelector("#app");
            Oapp.addEventListener("touchstart",function(e){
              //navigator 获取用户浏览器信息（UA:User-Agent）
              let userAgentInfo=navigator;
              console.log(userAgentInfo);
            });
            //navigator.appName 返回浏览器的名称
            //navigator.appCodeName 返回浏览器的代码名
            //navigator.appVersion 返回浏览器的平台和版本信息
            document.write("版本信息："+navigator.appVersion)

获取设备信息常用API

![20200730100833998.png][]

[20200730100833998.png]: /images/20230208/8c1ad441cb9042cf96957976d92603b3.png