防止jQuery Mobile Popup上的双击关闭行为

Question

我使用jQuery Mobile在信息图片按钮附近创建一个弹出窗口（见下图）。我创建的弹出窗口data-dismissable设置为false。红色表示jQuery Mobile创建的容器。

如果用户点击 i 图标一次，它就能完美运行。弹出窗口打开并调用popupafteropen事件。要取消它，用户可以点击（单击） i 或红色区域外（感谢data-dismissable值）。相反，如果用户执行双击（这里我的意思是两次点击的延迟非常短），弹出窗口打开，popupafteropen被调用，但随后也close被调用（由于第二次点击和data-dismissable值。总体结果是弹出窗口未显示。

是否有采用的解决方案？我的目标是阻止第二次点击以正确显示弹出窗口。

感谢。

Answer 1

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

其他人要求你将doubletap事件绑定到弹出打开图标并防止默认操作，遗憾的是jQuery Mobile不支持doubletap，所以你可以使用这个插件：

(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 Mobile曾经有过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
  }