title: Stop event bubbling in Javascript
body: <p>I have a html structure like : </p>
  
  <pre><code>&lt;div onmouseover="enable_dropdown(1);" onmouseout="disable_dropdown(1);"&gt;
  
              My Groups &lt;a href="#"&gt;(view all)&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;strong&gt;Group Name 1&lt;/strong&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;strong&gt;Longer Group Name 2&lt;/strong&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;strong&gt;Longer Group Name 3&lt;/strong&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;hr /&gt;
  
              Featured Groups &lt;a href="#"&gt;(view all)&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;strong&gt;Group Name 1&lt;/strong&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;strong&gt;Longer Group Name 2&lt;/strong&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;strong&gt;Longer Group Name 3&lt;/strong&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the <code>onmouseout</code> event to be triggered only from the main div, not the 'a' or 'ul' or 'li' tags within the div! </p>
  
  <p>My <code>onmouseout</code> function is as follows: </p>
  
  <pre><code>function disable_dropdown(d)
  {   
     document.getElementById(d).style.visibility = "hidden";
  }
  </code></pre>
  
  <p>Can someone please tell me how I can stop the event from bubbling up? I tried the solutions (<code>stopPropogatio</code> etc) provided on other sites, but I'm not sure how to implement them in this context.</p>
  
  <p>Any help will be appreciated.</p>