title: stop mouseleave when clicked on an object
body: <p>If I want to mouseenter a div, an element will show, then when mouseleave, element disappears.</p>
  <p>I have a click function inside the mouseenter so theres a drop down menu when clicked.</p>
  <p>I want the dropdown menu and the element to stay active even when mouseleaves. So I want mouseleaves to not be applicable in this situation, when there's a click event. User will have to click on the element again or anywhere on the page to make the element and dropdownmenu disappear.</p>
  <p>But I want to keep mouseleave function working so if user mouseenters a div, the element will show and they can click on it again.</p>
  <p>I currently have something like this, but I just dont know how to make the mouseleave to not be applicable when clicked</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".div").mouseenter(function(){
          $(".element",this).show();
          $(".element").click(function(){
              $(".dropdown").show();
              return false;
          });
      }).mouseleave(function(){
          $(".element",this).hide();
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='div'&gt;
         &lt;div class='element' style='display:none;'&gt;
            boxed element
         &lt;/div&gt;
         &lt;div class='dropdown' style='display:none;'&gt;
            menu
         &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>