bug收集:专门解决与收集bug的网站
网址:www.bugshouji.com
2007 苹果推出iphone,浏览器网页在iphone上显示时字体特别小,根本看不清楚
苹果的解决方案:
方案一:双指进行缩放
方案二:在屏幕上双击进行放大(单击300ms后,再单击才算双击),造成了,移动端点击事件,300ms 延迟的问题
解决方案,就是使用touch事件来替代
移动端新增touch事件 --- 只能使用现代事件进行添加
touchstart: 触摸开始
touchmove: 触摸移动
touchend: 触摸结束
touchcancel:touch 取消,如来电等
【扩展】:移动端touch、click、tap的区别
http://t.zoukankan.com/luo1240465012-p-9450627.html
代码如下:
<script type="text/javascript">
document.addEventListener('touchstart', function () {
console.log( 'touchstart' );
, false);
document.addEventListener( 'touchmove ', function () {
console.log( 'touchmove' );
}, false);
document.addEventListener( 'touchend ', function () {
console.log ( 'touchend ' );
}, false);
document.addEventListener( 'touchcancel', function () {
console.log( 'touchcancel');
, false);
setTimeout(function () {
alert( 'blocked ' ); //使用alert 来模拟touchcancel 打断
, 3000);
</script>
注:touchstart 触摸开始后,不管touchmove , touchend 是否移出开始触摸的元素,e.target都是开始时触摸的元素dom.
<script type="text/javascript">
document.addEventListener( 'touchstart', function (e) {
console.log(e.target);
, false);
document.addEventListener( 'touchmove', function (e){
console.log(e.target);
, false);
document.addEventListener( 'touchend ' , function (e){
console.log(e.target);
, false);
</ script>
e.touches : 在手机上的所有触点信息
e.changeTouches: 跟当前事件相关的所有触点信息
e.targetTouches:作用在当前元素上的所有触点信息
【扩展】touch事件中的touches、targetTouches和changedTouches详解
https://www.cnblogs.com/mengff/p/6005516.html
4. 封装 touch 事件
<script type="text/javascript">
; (function (doc){
var Touch = function (selector) {
return Touch.prototype.init(selector);
}
Touch.prototype = {
init: function (selector) {
if (typeof(selector) 'string') {
this.elem = doc.querySelector(selector);
return this;
}
},
tap: function (callback){
this.elem.addEventListener( 'touchstart' , fn, false);
this.elem.addEventListener( 'touchend ' , fn, false);
var sTime,eTime;
function fn (e){
e.preventDefault();
switch (e.type){
case 'touchstart' :
sTime = new Date().getTime();
break;
case 'touchend ':
eTime = new Date( ).getTime();
if(eTime - sTime < 500){
callback.call(this,e);
}
break;
}
}
},
longtap: function (callback){
this.elem.addEventListener( 'touchstart' , fn,false);
this.elem.addEventListener( 'touchmove', fn, false);
this.elem.addEventListener( 'touchend ' , fn, false);
var t = null,
_self = this;
function fn (e){
switch (e.type){
case 'touchstart ' :
t = setTimeout( function () {
callback.call(_self, e);
},500);
break;
case 'touchmove' :
clearTimeout(t);
t = null;
break;
case 'touchend':
clearTimeout(t);
t = null;
break;
}
}
}
window.$ = window.Touch = Touch;
})(document);
</script>
事件测试:
$('#box' ).tap(function (e) {
console. log(e.changedTouches[o]);
});
$('#box' ).longtap( function (e) {
console.log(e);
);
5. touch 事件的穿透
因click是在touch系列事件发生后300ms才触发的,混用click和touch肯定会导致穿透问题.
点击穿透现象的情况:
1) 蒙层问题
蒙层的关闭按钮绑定的是touch事件,而按钮下面元素绑定的是click事件,touch事件触发后,蒙层消失,300ms后这个点的click事件触发。
2) 跨页面点击穿透问题
如果按钮下面恰好是一个href属性的a标签,那么页面就会发生跳转(a标签跳转默认是click事件触发的)
解决问题:
方法一:自己封装tap事件不会有穿透问题,因为阻止了默认行为 e.preventDefault();
方法二:吃掉touch之后的click, 使用计时器,让touch后延迟350ms再隐藏蒙层
方法三:使用fastclick.js;可以直接写click事件
还有,其它方法,就不阐述了
苟有恒 , 何必三更眠五更起