OnClick and Hover events

mais123 · Mar 21, 2008

Hi, I have a DIV (image) that, when clicked, expands and inside that div user will see a menu (other divs).
Now I want to add functionality where when user clicks on any other part of the page while div is open, to close it so the menu closes.
I have a function to close the div. I also added onBlur event to the DIV to call that function. All is well, BUT it also closes the div when user clicks on soemthing inside the menu which obviously should not happen.
So I am wondering if I can usse onHover and onBlur together so that DIV only closes when user clicks OUTSIDE of it

Any suggestions are appreciated

yngjzy12 · Mar 23, 2008

Hey, here is a very basic, simple way of doing this. By no means is this complete but hopefully it will give you enough information to find a solution that fits your needs. I think you'll need to use the events rather than using onblur although there is probably a way to do it. There are numerous ways to go about this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Image Scroller</title>
<script type="text/javascript">
   var menuOpened = false;
   function showMenu(evt) {
      document.getElementById('menu').style.display = 'block';
      menuOpened = true;
      stopEvent(evt);
   }

   function stopEvent(evt) {
      if (window.event)
         window.event.cancelBubble = true;
      else
         evt.stopPropagation();
   }

   function hideIt() {
      document.getElementById('menu').style.display = 'none';
   }

   function checkMenu() {
      if (menuOpened) {
         hideIt();
         menuOpened = false;
      }
      alert('body clicked');
   }
</script>
</head>
<body onclick="checkMenu();">
<div id="yess" style="border:1px solid;" >
<img src="[URL unfurl="true"]http://www.google.com/intl/en_ALL/images/logo.gif"[/URL] onclick="showMenu(event);">

<div id="menu" style="display:none;" onclick="stopEvent(event);">Menu Options Here ||| Option 2 ||| etc</div>
</div>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

OnClick and Hover events

mais123

Programmer

yngjzy12

Programmer

Similar threads

Part and Inventory Search

Sponsor