你的位置:首页 > Java教程

[Java教程]移动端基础事件和交互


一:移动端基础事件

1.touchstart 手指触摸 == mousedown 
2.touchend 手指抬起 == mouseup
3.touchmove 手指抬起 == mousmove
touch事件  在 chrome的模拟器下,部分版本 通过on的方式来添加事件无效
所以在移动端一般都使用如下方式
addEventListener("事件名",函数,冒泡或捕获);
        1. 不会存在前后覆盖问题
        2. 在chrome的模拟器下可以一直识别

//addEventListen可以同时对一个元素添加多个事件element.addEventListener(    "touchstart",    function() {      console.log(1);    }  );  element.addEventListener(    "touchstart",    function() {      console.log(2);    }  );  //还可以定义函数,然后直接写函数名  element.addEventListener(    "touchstart",    fn      );  function fn() {    console.log(3);  }

二:事件冒泡和捕获   

addEventListener("事件名",函数,false或true);
False 冒泡 :点击元素 他会把这个事件一直向上传递 从下向上传递
True 捕获 :从上向下传递
三:阻止默认事件和阻止冒泡
e.preventDefault();//阻止默认事件
e.stopPropagation();//阻止冒泡事件.

//阻止系统的默认事件document.addEventListener(  "touchstart",  function(e) {    e.preventDefault();  });/*  e.preventDefault(); 阻止默认事件    阻止掉:document touchstart的默认事件,可以解决一下问题:    1. 阻止页面上的文字被选中  -- 可以通过阻止冒泡使某个元素上的文字被选中    2. 阻止页面上的系统菜单      隐患:    页面上的所有滚动条失效          */

三.事件点透

需要大家把这个代码复制到自己编译器上,在谷歌中打开,f12手机端进行调试.

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,user-scalable=no" /><title>无标题文档</title><style>#div {  position: absolute;  left: 0;  top: 0;  width: 200px;  height: 200px;  background: rgba(204,255,0,.5);}</style><script>//事件点透,两个元素上的事件都没被触发//阻止浏览器默认事件//document.addEventListener(//  "touchmove",//  function(e) {//    e.preventDefault();//阻止默认事件//  }//);window.onload = function () {  var div = document.querySelector("#div");  /*    PC端鼠标事件 在移动端也可以正常使用,但是注意 事件的执行 会有300ms的延迟      事件点透:      1. 在移动端 PC事件 有 300ms的延迟      2. 我们点击了页面之后,浏览器会记录点击下去的坐标      3. 300ms后,在该坐标找到现在在这的元素 执行事件    解决办法:      1. 阻止默认事件  (部分安卓机型不支持)      2. 不在移动端使用鼠标事件,不用a标签做页面跳转  */  div.addEventListener(    "touchend",    function (e) {    //这里不加入阻止默认事件,会发生点透事件,点div但是在百度汉字上,div消失后同时会触发跳转      //你可以尝试把这个去掉看一下效果      e.preventDefault();      this.style.display = "none";    }  );};</script></head><body><a href="http://www.baidu.com">百度</a><div id="div"></div></body></html>

四.防止误触事件

原理是:比方你对某刻元素设置了touchend事件,但是有时候我们会手指在这个元素上移动一下,没有想要触发这个事件,所以要进行判断,如果用户是移动则不触发这个事件.

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,user-scalable=no" /><title>无标题文档</title><style>a {  display: block;  width: 50px;  height: 50px;  background: red;  color: #fff;  margin: 20px;}</style><script>document.addEventListener(  "touchstart",  function(e) {    e.preventDefault();  });window.onload = function () {  var a = document.querySelectorAll("a");  //对每一个a标签添加touchmove事件,  for(var i = 0; i < a.length; i++) {    a[i].addEventListener(      "touchmove",      function() {        this.isMove = true;//定义一个变量来标识用户是否在元素上移动,      }    );        //防止误触原理是,防止移动结束时触发此事件        a[i].addEventListener(      "touchend",      function() {        //如果是移动就不会走if里边的事件.        if(!this.isMove) {          window.location.href = this.href;        }        this.isMove = false;      }    );  }};</script></head><body><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body></html>

四:tocuhEvent事件

touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,user-scalable=no" /><title>无标题文档</title><style>body {  margin: 0;}#box {  width: 200px;  height: 200px;  background: red;  color: #fff;  font-size: 30px;}</style><script>document.addEventListener(  "touchstart",  function(e) {    e.preventDefault();  });/*  touches 当前屏幕上的手指列表  targetTouches 当前元素上的手指列表  changedTouches 触发当前事件的手指列表*/window.onload = function () {  var box = document.querySelector("#box");  box.addEventListener(    "touchend",    function (e){      this.innerHTML = e.touches.length;    }  );};</script></head><body><div id="box"></div></body></html>