javascript touch事件

近段时间使用html5开发一个公司内部应用，而触摸事件必然是移动应用中所必须的，刚开始觉得移动设备上或许也会支持鼠标事件，原来是不支持的，好在webkit内核的移动浏览器支持touch事件，而且打包成app也毫无压力。本来觉得touch事件应该跟鼠标事件是同样的道理，实践过程当中虽然不难，但仍是碰到了很多坑，才发现仍是略有区别的。

$(document).bind(touchEvents.touchstart, function (event) {
            event.preventDefault();
            
        });
        $(document).bind(touchEvents.touchmove, function (event) {
            event.preventDefault();
            
        });

        $(document).bind(touchEvents.touchend, function (event) {
            event.preventDefault();
            
        });

不少博文中称touch的三个事件都有targetTouches，touches以及changeTouches对象列表，其实否则，touchend事件中应该是只有个changeTouches触摸实例列表的，并且这里说明一下，回调函数的event只是一个普通的object对象，实际上event中有一个originalEvent属性，这才是真正的touch事件，这个事件中才存在着上诉三个触摸实例列表，这三个实例存储了触摸事件的位置等等属性，相似于鼠标事件。其余地方基本与鼠标事件是一致的。简单介绍一下这三个触摸列表，touches是在屏幕上的全部手指列表，targetTouches是当前DOM上的手指列表，因此当手指移开触发touchend事件时，event.originalEvent是没有这个targetTouches列表的，而changeTouches列表是涉及当前事件的列表，例如touchend事件中，手指移开。接下来谈谈pc与移动端的适配问题，既然使用html5，固然是看中他的跨平台特性了，不单单要ios和android适配，pc上直接打开网页最好也是能够的，可是pc上只支持鼠标事件怎么办。好办，仔细观察上面代码的触摸事件，touchEvents.touchXXX，看以下代码：

var touchEvents = {
        touchstart: "touchstart",
        touchmove: "touchmove",
        touchend: "touchend",

        /**
         * @desc:判断是否pc设备，如果pc，须要更改touch事件为鼠标事件，不然默认触摸事件
         */
        initTouchEvents: function () {
            if (isPC()) {
                this.touchstart = "mousedown";
                this.touchmove = "mousemove";
                this.touchend = "mouseup";
            }
        }
    };

若在pc上，则使用鼠标事件，在移动设备中，就使用触摸事件，就这么简单，判断是否pc也很方便，就不作多解释了。

注释：event.originalEvent貌似jquery中才有，原生的js直接event.touches、event.targetTouches或者event.changedTouches就行