移动端——页面点击（ touchend -> click）

手机端页面好多要注意的，点击事件就是其中一个：

在手机端页面中使用 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，是为了使函数适用于小于一个屏幕高度的页面。