Question

我有一个jQuery函数，它通过菜单导航功能提交表单：

$(function () {
    $('#sidebarmenu1 a').on('click', function () {
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
    })
});

本节：

if (event.preventDefault) 
{ event.preventDefault(); } 
else 
{ event.returnValue = false; }

防止侧边栏按钮的默认操作（我认为 - 对此仍然是新的），即只是导航到页面。

用这种方式写的是keey IE快乐，因为没有为IE定义preventDefault（可能在那里使用了不正确的术语，但IE不喜欢preventDefault。）

但是现在这会在firefox中引发错误，因为（正如我在其他堆栈问题上看到的那样）事件不是全局定义的FF！我收到以下错误：

ReferenceError：未定义事件

现在开始讨论这个堆栈问题： event is not defined in FireFox, but ok in Chrome and IE

在IE和Chrome中，事件正在解析为window.event。 Firefox没有此属性，而是通过将事件作为参数传递给事件处理函数。 jQuery通过在所有浏览器中提供事件对象参数来为您抽象出这种差异。

但我认为我在这里使用jQuery并且仍然遇到问题。

对不起，如果我犯了基本错误，自学js和jQ。任何帮助非常感谢，谢谢！

Answer 1

这应该做..

$(function() {
    $('#sidebarmenu1 a').on('click', function(e) {
        var evt = e || window.event;
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        evt.preventDefault();
    })
});

Answer 2

如果使用事件对象jQuery传递给事件处理程序，则不会出现问题

$('#sidebarmenu1 a').on('click', function (event) {
    var url = $(this).attr('href');
    $('#myform').attr('action', url);
    $("#myform").submit();
    event.preventDefault();
})

Answer 3

如果我有更多的积分，我会投票给第二个答案（传递jQuery'事件'参数）。

我不知不觉地依赖于Firefox以外的浏览器定义的全局事件。我通过我的代码回过头来确保我总是在所有点击事件中指定事件参数。

E.g。

            $('#situationTextInput')
                .val('')
                .fadeTo(1000, 1.0)
                .focus()
                .off('keydown')
                .on('keydown', function (event) {
                    VsUtils.handleSpanishTextKeydown(event);
                });

我也养成了在.on之前调用.off的习惯，因为我的大部分代码都使用单页，重用内容。如果没有.off，我会在对话的后续步骤中无意中堆叠事件（即使它们是相同的回调）。

更改我的代码以将'event'直接传递给处理程序的副作用是绑定到'this'。改变。我选择重构代码来改变'this'。引用'event.currentTarget。'

在Firefox中使用javascript / jQuery事件处理程序

3 个答案: