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

来源：互联网发布：2017非诚勿扰淘宝店主编辑：程序博客网时间：2024/05/10 06:33

我们都知道移动端有双击放大页面, 为了能监听点击是否为双击，在单击后会等待下一次单击来完成双击，那我们只要单击的时候，就会延迟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")

好了，希望你帮到你

2 0