解决移动端点击事件延迟300ms的问题

我们都知道移动端有双击放大页面, 为了能监听点击是否为双击， 在单击后会等待下一次单击来完成双击， 那我们只要单击的时候，就会延迟300ms才会触发单击事件，这里我写了一个扩展jquery的mpclick事件，兼容pc和移动端， 专门解决移动端上点击延迟， 当然你也可以使用hammer.js，效果也很好, 使用之前请先引入jquery

;(function($) {
    /**
     * 兼容移动端和pc端的点击事件
     * @type {{setup: Function, teardown: Function}}
     */
    $.event.special.mpclick = {
        setup: function () {
            var reg = /Android|ip(hone|ad|od)|Windows Phone|SymbianOS/gi;
            if(!reg.test(navigator.userAgent)) {
                $(this).click(function() {
                    $(this).trigger("mpclick")
                })
            } else {
                var startpoint = {x: 0, y: 0};
                $(this).bind("touchstart", function(e) {
                    e = e || window.event
                    startpoint.x = Math.ceil(e.originalEvent.targetTouches[0].pageX);
                    startpoint.y = Math.ceil(e.originalEvent.targetTouches[0].pageY);
                });
                $(this).bind("touchend", function(e) {
                    e = e || window.event
                    var x = Math.ceil(e.originalEvent.changedTouches[0].pageX );
                    var y = Math.ceil(e.originalEvent.changedTouches[0].pageY );
                    if(x == startpoint.x && y == startpoint.y) {
                        $(this).trigger("mpclick");
                    }
                    e.preventDefault();
                })
            }
        },
        teardown: function (namespaces) {
            $.event.remove(this, 'click');
            $.event.remove(this, 'mpclick');
            $.event.remove(this, 'touchstart');
            $.event.remove(this, 'touchend');

        }
    };
    $.fn.mpclick = function (callback) {
        return callback ? this.bind("mpclick", callback) : this.trigger("mpclick");
    };

})(jQuery, window, document)

绑定 $(".testClass").mpclick(function(){}) 或者 $(".testClass").bind("mpclick", function(){}) .....

触发 $(".testClass").mpclick() 或者 $(".testClass").trigger("mpclick")

好了， 希望你帮到你