document.onmousedown close menu

[say]

Hi,

I currently have a image button that does a dropmenu onclick. However, I need to be able to close the menu when user click on outside of the image (so i use document.onmousedown to capture the event). Everything went well, except now that when the user click on the image itself "again" when the menu is open, i'd want it to close the menu but instead, once you click on the image, the document.onmousedown event will close the menu first and then reopen the menu. The simpler sense, it is currently conflicting with document.onmousedown event.

The full code is here (Hope someone have any ideas?):

function showuser( inputObj )
{
    if( $('usermenu').style.display == 'none' )
    {
        $('usermenu').style.position = 'absolute';
        $('usermenu').style.display = 'block';
        
        var leftPos = (getLeftPos(inputObj) - 38);
        var topPos  =  getTopPos(inputObj) + 30;
        
        $('usermenu').style.left = leftPos + 'px';
        $('usermenu').style.top  = topPos  + 'px';
    }
    
    document.onmousedown = function( e )
    {
        hideUserMenu( );
        return;
    }
}

function hideUserMenu( )
{
    $('usermenu').style.display = 'none';
} 

[Young Twig]

var open = false;

document.onmousedown = function(e)
{
	if(open)
	{
		hideUserMenu();
	}

	else
	{
		showUserMenu();
	}

	open = !open;
}

[say]

Hi Young,

no dice. Is not working. Still the same result as in reopen the menu after mousedown. I forgot to mention, even by clicking on the open menu links, it doesnt go to the link, instead it just close off the menu.

[jimfraser]

Yeah, what happens is the onmousedown event fires before the onclick event, and since you're not capturing onmousedown for the image or menu it bubbles/propagates up to the document.

Did you try using document.onclick to close the menu? Like:

open = false;

myImage.onclick = function() {
	if( open ) {
		hideMenu();
	} else {
		showMenu();
	}
	open = !open;
}

document.onclick = function() {
	if( open ) {
		hideMenu();
		open = false;
	}
}

If that doesn't work and it's still propagating, try using a function like this to handle your menu onclick:

myMenuItem.onclick = function(evt) {
	// do stuff
	
	evt = evt ? evt : window.event;
	if (evt.stopPropagation) {
		evt.stopPropagation();
	} else if (evt.cancelBubble) {
		evt.cancelBubble = true;
	}
}

[say]

Hi Jim,

the first method I've just tried. Doesn't work. For the second propagating method, i've no idea how to implement it to my code :S

openM = false;

function showuser( inputObj )
{
    openM = true;
    
    if( $('usermenu').style.display == 'none' )
    {
        $('usermenu').style.position = 'absolute';
        $('usermenu').style.display = 'block';
        
        var leftPos = (getLeftPos(inputObj) - 38);
        var topPos  =  getTopPos(inputObj) + 30;
        
        $('usermenu').style.left = leftPos + 'px';
        $('usermenu').style.top  = topPos  + 'px';
    }
    
    /*
    document.onmousedown = function( e )
    {
        hideUserMenu( );
        return;
    }
    */
    $('avatar_pull').onclick = function( )
    {        
        if( openM )
        {
            hideUserMenu( );
        }
        else
        {
            showuser( );
        }
        openM = !openM;
    }

    document.onclick = function( )
    {
        if( openM )
        {
            hideUserMenu( );
            openM = false;
        }
    }
}

function hideUserMenu( )
{
    $('usermenu').style.display = 'none';
} 

[say]

Hi,

is getting close. Right now, the situation is:

Scenerio #1:
1) Click on the image button, the menu open
2) Click on the image button again, the menu close

Scenerio #2:
1) Click on the image button, the menu open
2) Click on outside of the document, the menu close
3) click on the image button again, dont work the first time. Click again and it will open back the menu.

So the problem now is @ Scenerio #2: point 3

openM = false;

function showuser( inputObj )
{
    if( $('usermenu').style.display == 'none' )
    {
        openM = true;
        
        $('usermenu').style.position = 'absolute';
        $('usermenu').style.display = 'block';
        
        var leftPos = (getLeftPos(inputObj) - 38);
        var topPos  =  getTopPos(inputObj) + 30;
        
        $('usermenu').style.left = leftPos + 'px';
        $('usermenu').style.top  = topPos  + 'px';
        
        document.onkeydown = function( e )
        {
            if( !e ) e = window.event;
            if( e.keyCode == 27 ) { hideUserMenu(); }
        }
        document.onmousedown = function( e )
        {
            hideUserMenu( );
            return;
        }
    }

    inputObj.onclick = function(evt)
    {
        if( openM )
        {
            // do stuff
            hideUserMenu( );
            
            evt = evt ? evt : window.event;
            if (evt.stopPropagation) {
                evt.stopPropagation();
            } else if (evt.cancelBubble) {
                evt.cancelBubble = true;
            }
            
            openM = false;
            return;
        }
        else
        {
            showuser( inputObj );
            openM = true;
            return;
        }
    }
}

function hideUserMenu( )
{
    $('usermenu').style.display = 'none';
}