jqueryhideshowmousedownfocusout

How to prevent mousedown event in focusout event?


I am a beginner with jQuery and I added a jQuery in order to keep certain div elements in view and other div elements hidden when the focus of the button is gone (click outside the element). However, when you click down on the button, you see the "shown" elements. How do I prevent this from happening? I tried a .mousedown return default action, but no luck.

$(".table-btn").focusout(function() {
            $("#pricelist0").show();
            $("#pricelist1, #pricelist2").hide();
    })

Edit:
I created a fiddle to make the problem more visible, so when you click down on the other button, pricelist0 appears.

Extra:
With the given answer, and to be able to not loose the focus of the button when certain elements are clicked, you can additionally add the following code. Where any elements are the elements where you would like to keep the button be focused.

var lastFocus;
    $("any element").mousedown(function(e) {
    return false;
    });    
    $(".table-btn").blur(function() {
        lastFocus = this;
    });

Solution

  • When you click #pricelist1 or #pricelist2 it triggers focusout for the other button, that's why #pricelist0 was shown.

    Try this;

    $(document).on("click", ":not(.table-btn)", function(e){
        if(e.target !== this)
            return;
    
        $("#pricelist0").show();
        $("#pricelist1, #pricelist2").hide();
    });
    $("#1").click(function(){
        $("#pricelist1").show();
        $("#pricelist2, #pricelist0").hide();
    });
    $("#2").click(function(e){
        $("#pricelist2").show();
        $("#pricelist1, #pricelist0").hide();
    });