title: jQuery Click Event Not Working in Mozilla (Working in Chrome)
body: <p>I know that this has been asked here before, because I remember reading various posts on this topic when I first attempted to recreate this effect on my personal website. That being said, I cannot find those posts for the life of me this time around. I should have saved them >:/</p>
  
  <p>So, I apologize for the duplicate, but I am attempting to do one of those "click anywhere BUT here to close element overlay" things. Works beautifully in Chrome, but not so much in Mozilla. To top it off, other elements that I have used this for are working perfectly (in both Mozilla and Chrome), just not this one. </p>
  
  <p>jQuery</p>
  
  <pre><code>function closeProductOverlay() {
      if (!$(event.target).closest('#clickControl').length) {
          $('#productOverlay').toggle('fast', 'linear');
      }
  }
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="productOverlay" style="display:none;" onclick="closeProductOverlay()"&gt;
      &lt;div id="mobiPadding"&gt;
          &lt;div id="productContainer"&gt;
              &lt;div id="clickControl"&gt;
                  &lt;!-- This is where I populate items dynamically --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As I've said, I've applied this concept to many features throughout the same project/website, and they all work flawlessly. I'm at my wits end trying to diagnose this. </p>
  
  <p>I've tried a few messy "fixes," but none of them function the way they are intended. The closest I've gotten is if remove the if statement like so: </p>
  
  <p>jQuery </p>
  
  <pre><code>function closeProductOverlay() {
      $('#productOverlay').toggle('fast', 'linear');
  }
  </code></pre>
  
  <p>But then, obviously, if you click ANYWHERE, the overlay goes away. (Even if you are clicking buttons, or attempting to copy text). It's very annoying, and doesn't work as I need it to. </p>