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

【问题标题】：Why is event undefined when using a.click为什么使用 a.click 时事件未定义
【发布时间】：2015-12-12 22:23:26
【问题描述】：

我正在尝试为我的网站创建一个基本的 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 时遇到事件未定义错误。

未捕获的类型错误：无法读取未定义的属性“stopPropagation”

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

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

到目前为止，没有任何搜索结果解释了这种行为，我不明白为什么事件未定义。

【问题讨论】：

为了让您的代码工作，.preventDefault() 方法必须返回事件对象，因此它是可链接的。没有，所以你需要写event.preventDefault(); event.stopPropagation();，它依次调用event对象的这两个方法。
没关系......永远不要同时喝酒：D
@JaromandaX：明智的建议！ :-)

标签： javascript jquery onclick undefined jquery-events

【解决方案1】：

event 已定义。但是preventDefault 不返回该事件。所以你必须分两行来做：

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

【讨论】：

或者，在这种特殊情况下，只需 return false。从 jQuery 事件处理程序返回 false 告诉 jQuery 阻止默认值并停止传播。

【解决方案2】：

您不能将 event 对象的方法链接起来，例如：stopPropagation 与 preventDefault。

来自 jQuery 源代码：

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

    this.isDefaultPrevented = returnTrue;

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

如您所见，preventDefault 没有显式返回任何内容，因此默认返回 undefined。

你会得到错误

未捕获的类型错误：无法读取未定义的属性“stopPropagation”

解决问题使用

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

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

【讨论】：