移動端處理圖片要謹慎
包裹圖片的div放大的時候會拉伸圖片 造成圖片失真
將img設置為max-width:100% 最大的寬度為圖片自己的寬度
移動端事件 touch
移動端Touch相當於PC端的click點擊事件 touchstart touchmove touchend
事件對象有changedTouches targetTouches touches
touchstart
ontouchstart相當於onmousedown 直接添加這個屬性有時候不會觸發 所以利用addEventlistener(“touchstart”)
touchmove
鼠標按下的同時移動觸發
touchend
Ontouchend相當於onmouseup在鼠標不按下抬起的時候觸發
Touchcancel
比較少見 在系統取消的時候觸發
給元素添加事件的時候最好使用以下方式
a.addEventListener('touchstart',function(){
console.log("開始觸摸了")
})
在谷歌瀏覽器中直接添加onmoustart有時候會出錯不執行
Touch事件對象和mouse的不同
Touch事件是由touches，changedTouches和targetTouches保存關鍵的信息 最好使用changedTouches 其他兩個在touchend中會報錯
生成二維碼 利用JQ插件qrcode來生成
$(".box").qrcode("那小明")
這里的生成只能生成英文或者數字 中文會出現亂碼
移動端click點擊的時候會有300ms的延遲 瀏覽器要有事件作出判斷 是單擊還是雙擊
解決方法1：用自定義事件tap代替click
如果執行了touchstart又觸發了touchend在一個很短的時間內 並且不觸發thouchmove 就認為用戶做了點擊事件
解決方法2：引入zepto類庫 這個類庫自帶tap事件更容易操作 但要在zepto.JS后加一段代碼 地址如下：
Zepto：http://www.css88.com/doc/zeptojs_api/#
Zepto后面所加代碼網址：https://github.com/madrobby/zepto/blob/master/src/touch.js#files
引入后click事件：
$(".box").click(function(){
alert(1)
})
引入后tap事件：
$(".box").tap(function(){
alert(1)
})
引入后ontap事件：
$(".box").on('tap',function(){
alert(1)
})
均可以實現點擊消除300ms的延遲
下面列舉幾種zepto封裝的幾種點擊事件：
//zepto touch封裝的幾種點擊事件
//單擊事件
$(".box").singleTap(function(){
alert(1)
})
//雙擊事件
$(".box").doubleTap(function(){
alert(2)
})
//長按事件
$(".box").longTap(function(){
alert(3)
})
$(".box").swipeRight(function(){
$(this).css("transform","translate(100px,0px)")
})
解決方法3：引入fastclick
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
這是一個cdn類庫 很好的解決了延遲事件 推薦
移動端點透bug的產生及解決辦法
點透bug有一個特定的產生情況：
當上層元素是tap事件，且tap后消失，下層元素是click事件。這個時候，tap上層元素的時候就會觸發下層元素的click事件
解決方法1：全部修改為tap事件去除click
上下層都是tap事件，缺點：a標簽等元素本身就是自帶的click事件，更改為tap比較困難
解決方法2：設置一個遮罩層
點擊讓遮罩消失的同時執行下一步操作 遮罩層要延遲消失 否則還會出現點透
解決方法3：加一個中間層
使用中間層,添加一個透明的中間元素，給它添加click事件並消失，這個時候接收點透的是透明的中間層
解決方法4：引入fastclick
Fastclick不僅可以解決點擊300延時事件還可以解決點透事件但是要在點擊事件函數之前加FastClick.attach(document.body) 否則不會執行