关于使用jquery bind(on,...) event.touches 问题

最近在做移动端浏览器在固定页面大小情况下实现图片大小缩放，

值得注意的地方：

$(document).on('touchstart', function(e){

　e.toches; //  undefined　

　e.originalEvent.touches; // [object]
});

封装了一个简单的方法：

var ScalePic = DH.Base.create({

                init : function(){

                    this.selector = this.options.selector;

                    if(!this.selector) return;

                    this.startObj = {};

                    this.startFn = this.proxy(this.start);
                    this.moveFn = this.proxy(this.move);
                    this.stopFn = this.proxy(this.stop);

                    $(document).bind('touchstart', this.startFn);
                    $(document).bind('touchmove', this.moveFn);
                    $(document).bind('touchend', this.stopFn);

                },
                start : function(e){
                    var $e = $(e.target),
                        touches = e.originalEvent.touches
                        ;

                    if(!$e.is(this.selector)) return;

                    if(touches.length >= 2){
                        var x1 = touches[0].pageX,
                            y1 = touches[0].pageY,
                            x2 = touches[1].pageX,
                            y2 = touches[1].pageY,
                            position = $e.position(),
                            left = position.left,
                            top = position.top,
                            width = $e.width(),
                            height = $e.height(),
                            distance = this.distance(x1, y1, x2, y2)
                            ;

                        this.startObj = {
                            width : width,
                            height : height,
                            left : left,
                            top : top,
                            distance : distance
                        }
                    }
                },
                move : function(e){
                    var $e = $(e.target),
                        touches = e.originalEvent.touches,
                        startObj = this.startObj
                        ;

                    if(!$e.is(this.selector)) return;

                    if(touches.length >= 2){
                        var x1 = touches[0].pageX,
                            y1 = touches[0].pageY,
                            x2 = touches[1].pageX,
                            y2 = touches[1].pageY,
                            distance = this.distance(x1, y1, x2, y2),
                            rate = distance / startObj.distance
                            width = rate * startObj.width,
                            height = rate * startObj.height,
                            left = (startObj.width - width) / 2 + startObj.left,
                            top = (startObj.height - height) / 2 + startObj.top
                            ;

                        $e.css({
                            width : width,
                            height : height,
                            left : left,
                            top : top
                        })
                    }
                },
                stop : function(e){
                    // 停止
                },
                distance : function(x, y, ex, ey){
                    return Math.sqrt(Math.pow(ex - x, 2) + Math.pow(ey - y, 2), 2);
                }

            });

            new ScalePic({selector : '.img'});