Question

我正在尝试为我的网站创建一个基本的megamenu，但是我在单击时打开和关闭菜单时出现问题。这是HTML的基本版本：

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

这是JavaScript的基本版本：

event.preventDefault()

问题是我在运行stopPropagation时遇到一个未定义的事件错误。

未捕获的TypeError：无法读取未定义的属性'stopPropagation'

这是行动中错误的一个小问题：http://jsfiddle.net/styphon/0go9ukky/

我的问题是为什么在这种情况下事件未定义？如果事件未定义，为什么spines['right'].set_color('none')不会抛出相同的错误？我怎样才能使这个工作？

到目前为止，没有一个搜索结果解释了这种行为，我无法理解为什么事件未定义。

Answer 1

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

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未明确返回任何内容，因此默认情况下会返回undefined。

你会得到错误

未捕获的TypeError：无法读取未定义的属性'stopPropagation'

要解决问题，请使用

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

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

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

2 个答案: