Try to make popup menu by Jquery mobile

Question

I'm trying to make a popup menu with this code:

$(document).mouseup(function (e) {
    if(document.documentElement.clientWidth < 768 && $(".sider-inner").is(":visible")){
        if (!$(".sider-inner").is(e.target) && $(".sider-inner").has(e.target).length == 0) {
            $(".sider-inner, .main-wrapper").animate({'left':"-=220"}, 500, 'swing', function(){
                $(".sider-inner").hide();
            });
        }
    }
});

$(document).on("swiperight", function(){
    if(document.documentElement.clientWidth < 768 && !$(".sider-inner").is(":visible")){
        $(".sider-inner").show();
        $(".sider-inner, .main-wrapper").animate({'left':"+=220"}, 500);
    }
});

It works on mobile, but with small-width desktop, the menu will hide immediately after swiping right. how can I fix this?

Answer 1

ok I have solved myself ^^ this is my fixed code:

$(document).mousedown(function (e) {
    if(document.documentElement.clientWidth < 768 && $(".sider-inner").is(":visible")){
        pageX = e.pageX;
        pageY = e.pageY;
    }
});

$(document).mouseup(function (e) {
    if(document.documentElement.clientWidth < 768 && $(".sider-inner").is(":visible")){
        if (!$(".sider-inner").is(e.target) && $(".sider-inner").has(e.target).length == 0) {
            if(e.pageX != pageX) return;
            if(e.pageY != pageY) return;
            $(".sider-inner, .main-wrapper").animate({'left':"-=220"}, 500, 'swing', function(){
                $(".sider-inner").hide();
            });

        }
    }
});