移动端事件相关

移动端事件相关

移动端开发与PC项目开发的差异：

1.click事件300ms延迟

• 移动web页面上的click事件响应都要慢上300ms
• 移动设备访问web页面时往往需要“双击”或者“捏开”放大页面后来看清页面的具体内容
• 正式为了确认用户是“单击”还是“双击”，safari需要300ms的延迟来判断。
• 后来的iPhone也一直沿用这样的设计，同时Android也借鉴并沿用了这样的设计
• 于是“300ms延迟”就成了一个默认的规范

解决方案：

(1)设置meta viewport

<meta name='viewport' content='width=device-width.initial-scale=1.0'>

(2)fastclick

<script type='text/javascript' src='lib/fastclick.js'></script>if('addEventListenner'in document){
    doucunment.addEventListener('DOMContentLoad',function(){
        FastClick.attach(document.body);},false);}

(3)touch-action:manipulation

• 禁用双击屏幕

<style>
*{touch-action:manipulation;}
</style>

2.Hammer.js（手势）

• HammerJS是一个优秀的、轻量级的触屏设备手势库

var hammertime=newHammer(myElement,myOptions);
harmmertime.on('pan',function(ev){
    console.log(ev);});

• vue touch封装了Hammer.js

（1)导入

npm install --save vue-ouch@next

(2)注册

//var VueTouch=require('vue-touch')import VueTouch from'vue-touch'
Vue.use(VueTouch),{name:'v-touch'}<div>//左滑<v-touch @swipeleft="pnSwipeleft">作用区域</v-touch></div>