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

【问题标题】：Prevent double tap closing behavior on jQuery Mobile Popup防止 jQuery Mobile Popup 上的双击关闭行为
【发布时间】：2014-07-15 00:41:03
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： javascript jquery jquery-mobile popup double-click

【解决方案1】：

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

其他的需要你绑定一个双击事件到弹出打开图标并阻止默认操作，不幸的是 jQuery Mobile 不支持双击，所以你可以使用这个插件：

(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;
    }
}

【讨论】：

我在这里遗漏了一些东西... 过去有更简单的解决方案，jQUery Mobile 曾经有 mobileinit 配置参数，允许您设置点击事件可以持续多长时间。
旧版本的 jQuery Mobile 有一个配置参数（通过 mobileinit），您可以使用它来设置在点击事件触发之前您可以按下屏幕多长时间。因此，您可以将 1 秒内的所有内容都设置为点击。而且我刚刚意识到这对您毫无帮助，您的案件仍会触发两次。 :D
我什至没有考虑 FastClick，它在这里没有任何作用
嗯，你能创建一个简单的 jSFiddle 示例，只有图标和弹出窗口吗？
抱歉耽搁了。提供一个例子有点复杂。由于点击时也存在问题（并不总是捕获点击），我认为骨干事件委托机制可能是问题所在。我会尝试做一些测试。

【解决方案2】：

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

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

【讨论】：