Search code examples
javascriptjqueryonclickundefinedjquery-events

Why is event undefined when using a.click


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:

<ul class="menu">
    <li class="dropdown-toggle">
        <a href="#">Toggle Dropdown</a>
        <ul class="dropdown-wrap">
            <ul class="column">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
            <ul class="column">
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
            </ul>
        </ul>
    </li>
</ul>

And this is a basic version of the JavaScript:

$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 > 0) {
        closeDropdown($('.dropdown-wrap.open'));
    }
});

function closeDropdown($wrap) {
    $wrap.removeClass('open');
    console.log('Close');
}
function openDropdown($wrap) {
    $wrap.addClass('open');
    console.log('Open');
}

The problem is I'm getting an event is undefined error when running stopPropagation.

Uncaught TypeError: Cannot read property 'stopPropagation' of undefined

This is a jsfiddle of the error in action: http://jsfiddle.net/styphon/0go9ukky/

My questions are why is event undefined in this case? And if event is undefined why doesn't event.preventDefault() throw the same error? How can I get this working?

None of the search results have explained this behaviour so far and I can't understand why event is undefined.


Solution

  • event is defined. But preventDefault does not return the event. So you have to do it in two lines:

    event.preventDefault();
    event.stopPropagation();