手机端页面好多要注意的,点击事件就是其中一个:
在手机端页面中使用 click,安卓手机能正常实现点击效果,可是苹果手机不能点击;用 touchend 代替 click,苹果手机中能点击,但是可能出现小问题。
所以,在进行移动端页面优化时,一般使用 touch 事件替代鼠标相关事件,用的较多的是使用 touchend 事件替代PC端的 click 和 mouseup 事件。
注:在使用 touched 时最好都加上 t.preventDefault(); 阻止浏览器默认的后续动作。
接下来记录我使用 touchend 遇到的问题的解决方法:
1、点击后页面自动放大【 IOS 】
具体描述:在 newPlace.html(选择新地点)页面中,点击建筑、楼层、房间、工位右侧的 input 会弹出遮罩层,选择遮罩层中的相应选项后,会显示在对应建筑、楼层、房间、工位右侧。但是在点击弹出遮罩层时页面会自动放大。
<li class="place_lis area" data-type="area"><span>建筑</span><input type="text" class="control" onfocus="this.blur();"><img src="../img/chaoxia.png"></li>
解决方法:使用 preventDefault() 方法,阻止元素发生默认的行为。
$(".control").on('touchend',function(t){// 点击之后的操作t.preventDefault(); // 阻止元素发生默认的行为});
2、页面滑动事件触发 touchend 点击事件【 Android & IOS 】
具体描述:在serviceRequest.html 服务需求页面中滑动查看所有服务需求后,会跳转至需求详情页面。也就是说:在页面滑动完成后,如果当前触点的位置所指的元素绑定了 touchend 事件,这时便会触发该元素的 touchend 事件,造成误操作。
解决方法:在页面滚动时停止 touchend 事件冒泡,这样就可以防止触发 touchend 事件。
$(function(){stopTouchendPropagation_AfterScroll();$(document).on('touchend', '.service_cont', function (t) { window.location.href = "servicePJ_before.html?id=" + $(this).attr('id') + "";t.preventDefault();});});
function stopTouchendPropagation_AfterScroll(){var locked = false;window.addEventListener('touchmove', function(ev){locked || (locked = true, window.addEventListener('touchend', stopTouchendPropagation, true));}, true);function stopTouchendPropagation(ev){ev.stopPropagation();window.removeEventListener('touchend', stopTouchendPropagation, true);locked = false;}}
注:在移动端,scroll 事件是在滚动结束后才会触发一次,而 touchmove 事件是在滑动过程中多次触发,使用 scroll 会比使用 touchmove 在性能上有一定优化。
但是在上面 stopTouchendPropagation_AfterScroll() 函数中,用 touchmove 不用 scroll,是为了使函数适用于小于一个屏幕高度的页面。