移动端touch事件代替click事件

最近有做到移动端的项目（主要是微信端），开发中遇到iPhone手机 click 事件有 300ms 延迟，尝试使用fastclick.js解决，但效果并不理想，测试发现触摸不灵敏，几乎需要点击两次才能有一次触发成功，暂未找到原因。

---

使用touch事件代替click事件

一个微信端的付款界面小栗子

    var keyboard = document.querySelector('.keyboard'); //键盘
    var amount = document.getElementById('amount'); //金额
    var payBtn = document.getElementById('confirm'); //支付按钮
    var keyTimer;   //长按计时
    var keyFlag;    //是否触发按键
    var startX, startY; //开始触摸的坐标

    //给键盘绑定touch事件（解决click延迟问题）
    keyboard.addEventListener('touchstart', function (e) {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //移动端判断是否是iOS平台浏览器
            e.preventDefault();  //见注解：1.
        }

        var action = e.target.getAttribute('data-action');  //按键类型

        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;

        keyFlag = true;

        keyTimer = setTimeout(function () { //阻止长按触发输入
            keyFlag = false;

            if (amount.innerHTML && action === 'del') { //长按删除
                //执行清空的操作...
            }
        }, 500);
    });
    keyboard.addEventListener('touchmove', function (e) {    //阻止滑动触发输入（增加滑动触发范围）
        var x = Math.abs(startX - e.touches[0].clientX) >= 30;
        var y = Math.abs(startY - e.touches[0].clientY) >= 30;
        if (x && y) {  //见注解：2.
            clearTimeout(keyTimer);
            keyFlag = false;
        }
    });
    keyboard.addEventListener('touchend', function (e) {    //触发输入
        clearTimeout(keyTimer);

        if (keyFlag) {
            //执行输入金额的操作...
        }
    });

注解：

1. 改用touch事件后发现iPhone手机触摸不灵敏，预测是触发了webview拖动的影响，所以touchstart时添加preventDefault阻止元素的默认行为，但添加后却造成安卓手机触摸不灵敏（暂未找到原因），故而判断浏览器平台类型，如果是iOS系统便阻止元素的默认行为。

2. 在touchmove事件阶段阻止触发按键，轻微的滑动都会导致输入时没反应、漏输；解决方案：增加滑动触发范围（滑动距离在30*30以内），水平或垂直方向滑动距离大于等于30便阻止触发按键。