强烈推荐-类似jquery门面模式的封装

兼容桌面、ie10和手机端的轻触事件

(function(){
    
    var TOUCHSTART, TOUCHEND;
    
    //normal touch events
    if (typeof(window.ontouchstart) != 'undefined') {
        
        TOUCHSTART = 'touchstart';
        TOUCHEND   = 'touchend';
        
    //microsoft touch events
    } else if (typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND   = 'MSPointerUp';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND   = 'mouseup';
    }
    
    
    function NodeFacade(node){
        
        this._node = node;
        
    }
    
    NodeFacade.prototype.getDomNode = function() {
        return this._node;
    }
    
    NodeFacade.prototype.on = function(evt, callback) {
        
        if (evt === 'tap') {
            this._node.addEventListener(TOUCHSTART, callback);
        } else if (evt === 'tapend') {
            this._node.addEventListener(TOUCHEND, callback);
        } else {
            this._node.addEventListener(evt, callback);
        }
        
        return this;
        
    }
    
    NodeFacade.prototype.off = function(evt, callback) {
        if (evt === 'tap') {
            this._node.removeEventListener(TOUCHSTART, callback);
        } else if (evt === 'tapend') {
            this._node.removeEventListener(TOUCHEND, callback);
        } else {
            this._node.removeEventListener(evt, callback);
        }
        
        return this;
    }
    
    window.$ = function(selector) {

        var node = document.querySelector(selector);

        if(node) {
            return new NodeFacade(node);
        } else {
            return null;
        }
    }
    
    
})();

$('.button').on('tap', function(e) {
    e.preventDefault();
    togglePicture();
    e.target.className = "active button";
}).on('tapend', function(e) {
    e.target.className = "button";
});