title: Why is event undefined when using a.click
body: <p>I am trying to create a basic megamenu for my site but I'm having problems with the menu opening and closing on one click. This is a basic version of the HTML:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
      &lt;li class="dropdown-toggle"&gt;
          &lt;a href="#"&gt;Toggle Dropdown&lt;/a&gt;
          &lt;ul class="dropdown-wrap"&gt;
              &lt;ul class="column"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="column"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And this is a basic version of the JavaScript:</p>
  
  <pre><code>$menu = $('ul.menu');
  $menu.find('li.dropdown-toggle').children('a').click(function(event) {
      var $wrap = $(this).siblings('.dropdown-wrap');
      if ($wrap.hasClass('open')) {
          closeDropdown($wrap);
      } else {
          openDropdown($wrap);
      }
      event.preventDefault().stopPropagation();
  });
  $('html').click(function() {
      console.log('HTML FIRED');
      if ($('.dropdown-wrap.open').length &gt; 0) {
          closeDropdown($('.dropdown-wrap.open'));
      }
  });
  
  function closeDropdown($wrap) {
      $wrap.removeClass('open');
      console.log('Close');
  }
  function openDropdown($wrap) {
      $wrap.addClass('open');
      console.log('Open');
  }
  </code></pre>
  
  <p>The problem is I'm getting an event is undefined error when running stopPropagation.</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'stopPropagation' of undefined</p>
  </blockquote>
  
  <p>This is a jsfiddle of the error in action: <a href="http://jsfiddle.net/styphon/0go9ukky/" rel="nofollow">http://jsfiddle.net/styphon/0go9ukky/</a></p>
  
  <p>My questions are why is event undefined in this case? And if event is undefined why doesn't <code>event.preventDefault()</code> throw the same error? How can I get this working?</p>
  
  <p>None of the search results have explained this behaviour so far and I can't understand why event is undefined.</p>