防止jQuery手机弹出双击关闭行为

Question

我使用jQuery移动在信息图像按钮附近创建一个弹出窗口(见下面的图片)。我正在创建的弹出窗口将data-dismissable设置为false。用红色高亮显示由jQuery移动创建的容器。

​

​

如果用户在I图标上点击一次，它就会工作得很好。弹出窗口打开，并调用popupafteropen事件。要取消它，用户可以点击(点击)在I或红色区域外(感谢data-dismissable值)。相反，如果用户执行双抽头(在这里，我的意思是两个抽头之间的延迟非常短)，弹出窗口就会打开，popupafteropen会被调用，但是close也会被调用(因为第二个抽头和data-dismissable值)。总的结果是弹出窗口没有显示。

有什么解决办法吗？我的目标是防止第二个点击，以便正确显示弹出。

谢谢。

Answer 1

Kazekage有一个好主意，所以先看看它。

另一个要求您将双击事件绑定到弹出打开图标并防止默认操作，不幸的是，jQuery移动不支持双击，因此您可以使用这个插件：

(function($) {
     $.fn.doubleTap = function(doubleTapCallback) {
         return this.each(function(){
            var elm = this;
            var lastTap = 0;
            $(elm).bind('vmousedown', function (e) {
                                var now = (new Date()).valueOf();
                var diff = (now - lastTap);
                                lastTap = now ;
                                if (diff < 250) {
                            if($.isFunction( doubleTapCallback ))
                            {
                               doubleTapCallback.call(elm);
                            }
                                }      
            });
         });
    }
})(jQuery);

像这样把它绑起来：

$(".icon").doubleTap(function(event){
    event.preventDefault();
});

过去解决这个问题的方法要简单得多，jQUery移动曾经有mobileinit配置参数，允许您设置点击事件可以持续多长时间。

或者，您可以监视抽头之间的间隔并防止允许操作，如下所示：

var lastTapTime;
function isJqmGhostClick(event) {
    var currTapTime = new Date().getTime();

    if(lastTapTime == null || currTapTime > (lastTapTime + 800)) {
        lastTapTime = currTapTime;
        return false;
    }
    else {
        return true;
    }
}

Answer 2

如果弹出窗口已经打开，您可以处理该事件并忽略它。类似于：

if ($.mobile.activePage.find("#popupID").is(":visible") {
  // Do something here if the popup is open
  }