移动端—— 兼容PC端，移动端的点击事件

移动设备上不支持鼠标事件，好在webkit内核的移动浏览器支持 touch 事件，所以触摸事件是移动应用中所必须的。touchstart、touchmove、touchend事件可以类比于mousedown、mouseover、mouseup的触发。

一、touch 相应事件

touchstart : 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove : 当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend : 当手指从屏幕上移开时触发。
touchcancel : 当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches : 表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches : 特定于事件目标的Touch对象的数组。
changeTouches : 表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX : 触摸目标在视口中的X坐标。
clientY : 触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX : 触摸目标在屏幕中的x坐标。
screenY : 触摸目标在屏幕中的y坐标。
target : 触摸的DOM节点坐标

二、PC 与 移动端 的适配问题（兼容）  【重点】

既然使用HTML5，当然是看中他的跨平台特性了，不仅仅要iOS和Android适配，pc上直接打开网页最好也是可以的，但是pc上只支持鼠标事件，

所以，解决方案：判断是否pc设备，若是pc，需要更改touch事件为鼠标事件，否则默认触摸事件。

<script>
    /*** 手机按下态 * @type {{touchstart: string, touchend: string, initTouchEvents: Function}}  */
    var touchEvents = {
        touchstart: "touchstart",
        touchend: "touchend",
        initTouchEvents: function () {          
            if(!browserRedirect()){
                this.touchstart = "mousedown";
                this.touchend = "mouseup";
            }
        }
    };
    function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            return true;    // 移动设备
        } else {
            return false;    // PC
        }
    }
 
    var phone = document.getElementById("phone");
    touchEvents.initTouchEvents();
    phone.addEventListener(touchEvents.touchstart, function (e) {
        var self=this;
        self.style.background = "red";
        e.stopPropagation();
        e.preventDefault();
 
    });
 
    phone.addEventListener(touchEvents.touchend, function (e) {
        var self=this;
        self.style.background = "blue";
        e.stopPropagation();
        e.preventDefault();
    });
 
</script>

页面上：

<style>
        * { margin:; padding:; }
        a { display: block;width: 200px;font-size: 16px; text-align: center; line-height: 80px;cursor: pointer;margin: 50px;}
        .phone { background: green; }
</style>

<a id="phone" class="phone">请点击我</a>

就是这样，若在pc上，则使用鼠标事件；在移动设备中，就使用触摸事件。

 效果展示：

1、PC端：

（1）初始：

（2）鼠标在 a 上按下：

（3）鼠标在 a 上松开：

2、手机端：

（1）初始：

（2）手指在 a 上按下：

额，这个截不到图。。。但是亲测手指按在 a 上即触发 touchstart 事件， a 背景色变为红色。

（3）手指从 a 上拿开：