H5移动端事件详细介绍

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事件绑定多少个事件它就执行多少个事件，并且在谷歌一直被识别,且编译顺序从上往下

let Obox=document.querySelector("#box");
Obox.addEventListener("touchstart",function(e){
    console.log("我的手接触到了屏幕1");
});
Obox.addEventListener("touchmove",function(e){
    console.log("我的手接触到了屏幕2");
});
Obox.addEventListener("touchend",function(e){
    console.log("我的手接触到了屏幕3");
});

为什么移动端使用：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