码迷,mamicode.com
首页 > 移动开发 > 详细

05移动端事件

时间:2017-08-25 13:49:49      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:用户操作   def   end   第一个   左右   函数   style   隐藏   0ms   

一、移动端三大事件    
     1、手指按下     ontouchstart
     2、手指触摸     ontouchmove     
     3、手指抬起     ontouchend
//注意:在移动开发时,浏览器模拟器时好时坏,一般不用onX的方式绑定事件函数,要用事件绑定的方式(即第二种)
div.ontouchstart = function(){};
div.addEventListener(‘touchstart‘, function(){});
 
二、PC端事件在移动端(出现的问题)
     1、PC端事件在移动端略慢,大概300ms左右
     2、阻止PC事件
document.addEventListener(‘touchstart‘, function(ev){
    ev.preventDefault();
});
          作用与问题:
               1、移动端的点透     问题:当上层元素发生点击时,下层元素也有点击特性。300ms之后,如果上层元素消失或隐藏,目标点会“漂移”到下层元素身上,就会触发点击行为
                    解决:法1. 下层不要使用有焦点特性的元素(如a或者其他有点击行为的元素)     法2. 阻止PC事件
document.addEventListener(‘touchstart‘, function(ev){
    ev.preventDefault();
});
p.addEventListenr(‘touchstart‘, function(){     //这边click 改为 touchstart
    alert(111);
});    
               2、解决IOS10下meta中禁止用户缩放功能
               3、解决IOS10下溢出隐藏问题
               4、禁止系统默认的滚动条
               5、禁止长按选中文字、图片,系统默认菜单
               6、问题:阻止了元素的焦点行为
//解决方法(解决因为document的阻止事件导致的 input 框不能触焦问题)
txt.addEventListenr(‘touchstart‘, function(ev){
    ev.stopPropagation();
});
 
三、移动端事件对象(当给某元素加上绑定事件函数之后,事件函数默认第一个参数就是事件对象。事件对象:用户在浏览器下触发某个行为,事件对象会记录用户操作时的相关细节(如位置信息等))
     1、touches:当前位于 屏幕(包括dom元素之外) 上的所有手指的列表
     2、targetTouches:位于当前 DOM 元素上(当前dom元素之外的无法获取)的手指的列表
     3、changedTouches:涉及当前事件的手指的一个列表
     例子:移动端无缝轮播切换
 
 
 
 
 
 
 
 
 
 
          

05移动端事件

标签:用户操作   def   end   第一个   左右   函数   style   隐藏   0ms   

原文地址:http://www.cnblogs.com/hihao/p/7427150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!