Geek asks and answers

Onblur event fires before another onclick div

enter image description here

As above, I have a button that, when clicked, will open a submenu. There are three elements for each parameter in the submenu (actually more, I think, but for its simplicity there will be 3). I focus on the main div (white "frame") submenu. Onblur of this div - I will then hide the submenu.

All this behaves as expected, but I have a doubt that when one of the three elements is pressed for a certain parameter (i.e., given focus), the main div closes due to its onblur event handler - and the PopUp function, which is related with the onClick event of items for options in the submenu, they do not start / do not execute.

I need to somehow handle the onblur event of the main div this way if the parameters were not clicked.

JQuery, , , .

+3
2

- , - , .

, , onblur - div, -, onblur/onclick, onclick "" .

+3

: ( , /..)

function mouseOverSubMenu(mouseX, mouseY) {
    var divTop = $('.sub_menu').offset().top;
    var divLeft = $('.sub_menu').offset().left;
    var divRight = divLeft + $('.sub_menu').width();
    var divBottom = divTop + $('.sub_menu').height();


    return (mouseX >= divLeft && 
            mouseX < divRight &&
              mouseY >= divTop &&
              mouseY < divBottom);
}


$('.sub_menu, .other_elements').hover(
    function(e) {
        if (mouseOverStartButton(e.pageX, e.pageY)) {
            // show menu
        }
    },
    function(e) {
        if (!mouseOverStartButton(e.pageX, e.pageY)) {  
            //hide menu
        }
    }
);
+2

More articles:


All Articles