为什么使用 a.click 时事件未定义

Question

我正在尝试为我的站点创建一个基本的 megamenu，但是我在单击一次打开和关闭菜单时遇到了问题。这是 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>

这是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');
}

问题是当运行 stopPropagation.

时我收到一个事件未定义的错误

Uncaught TypeError: Cannot read property 'stopPropagation' of undefined

这是操作错误的 jsfiddle：http://jsfiddle.net/styphon/0go9ukky/

我的问题是为什么在这种情况下事件未定义？如果事件未定义，为什么 event.preventDefault() 不抛出同样的错误？我怎样才能让它工作？

None 的搜索结果到目前为止已经解释了这种行为，我不明白为什么事件未定义。

Answer 1

event 已定义。但是 preventDefault 没有 return 事件。所以你必须分两行来做：

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

Answer 2

您不能从 event 对象链接方法，例如：stopPropagation 与 preventDefault。

代码来自 jQuery 来源：

preventDefault: function () {
    var e = this.originalEvent;

    this.isDefaultPrevented = returnTrue;

    if (e && e.preventDefault) {
        e.preventDefault();
    }
},

如您所见，preventDefault 没有明确 return 任何内容，因此默认情况下 undefined 是 returned。

你会得到错误

Uncaught TypeError: Cannot read property 'stopPropagation' of undefined

解决问题使用

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

您也可以使用 return false; 作为这两种方法的替代方法。

为什么使用 a.click 时事件未定义

Why is event undefined when using a.click

javascript

jquery

onclick

undefined

jquery-events