移动端常见问题 · 要努力

## 单击穿透单击穿透现象有3种： > 单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。 > > 页面单击穿透问题：如果按钮下面正好是一个有href属性的a标签，那么页面就会发生跳转。 > > 跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click事件被触发了。有4种解决方案 >（1）只用 touch：把页面内所有 click都换成 touch事件（ touchstart、 touched、tap）。 > >（2）只用 click：因为单击会带来300ms的延迟，所以页面内任何一个自定义交互都将增加300ms的延迟。 > >（3）轻触〔tap）后延迟350ms再隐藏蒙层。改动最小，缺点是隐藏蒙层变慢了。 > >（4）添加 pointer-events:none样式。 > >麻烦且有缺陷。蒙层隐藏后，给按钮下面的元素添上pointer-events:none样式，让 click穿过去，350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内，用户单击按钮下面的元素没反应，如果用户单击速度很快，一定会发现。 **移动端 click事件有300ms延迟** 一般在移动端用 touchstart、 touchend、 touchmove、tap（模拟的事件）事件来取代 click事件。 ## 数据缓存 ```js jQuery：存：$.cookie('key','value') 取：$.cookie('key') vue：存储：localstorage.setItem（‘key’，‘value’）接收：localstorage.getItem（‘key’）微信小程序：存储：通过wx.setStorage/wx.setStorageSync写数据到缓存接收：通过wx.getStorage/wx.getStorageSync读取本地缓存， uni-app：存储：uni.setStorage({key:“属性名”，data:“值”}) 接收：uni.getStorage({key:“属性名”,success(e){e.data}}) uni.setStorage 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key对应的内容---异步接口 uni.setStorageSync -- 同步接口 uni.removeStorageSync 从本地缓存中同步移除指定 key。 ``` ### 条件注释实现跨段兼容条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。以 #ifdef 加平台标识开头，以 #endif 结尾。 ```html  <view> h5页面会显示 </view>   <view> 微信小程序会显示 </view>   <view> app会显示 </view>  ``` ### 响应式适配方法 ### 图片模糊问题