CODEWITHSUNDEEP
javascriptjqueryjquery-mobilepopupdouble-click
Lorenzo B
Lorenzo B

Reputation: 33428

Prevent double tap closing behavior on jQuery Mobile Popup

I'm using jQuery Mobile to create a popup near an info image button (see picture below). The popup I'm creating has data-dismissable set as false. In red it has been highlighted the container created by jQuery Mobile.

enter image description here

If the user taps once on i icon, it works perfectly. The popup opens and popupafteropen event is called. To dismiss it, the user can tap (click) on the i or outside the red area (thanks to data-dismissable value). On the contrary, if the users performs a double tap (here I mean that the delay bewteen two taps is very short), the popup opens, popupafteropen is called but then also close is called (due to the second tap and data-dismissable value). The overall result is that the popup is not shown.

Are there any solutions to adopt? My goal is to prevent the second tap in order to display the popup correctly.

Thanks.

Upvotes: 2

Views: 872

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Kazekage Gaara has a good idea so look first at it.

Other one would require you to bind a doubletap event to popup opening icon and prevent default action, unfortunately jQuery Mobile don't have support for doubletap so you can use this plugin:

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

and bind it like this:

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

There used to be much easier solution for this, jQUery Mobile used to have mobileinit configuration parameter that allowed you to set how long tap event can last.

Or you can monitor interval between taps and prevent allow actions, like this:

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

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

Upvotes: 4

Kazekage Gaara
Kazekage Gaara

Reputation: 15052

You can handle the event and ignore it if the popup is already open. Something like :

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

Upvotes: 2

Related Questions