移动端事件 点透BUG 点击事件延迟的解决方法
移动端处理图片要谨慎
包裹图片的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) 否则不会执行
