event.preventDefault 在 Firefox 中不起作用答案

【问题标题】：event.preventDefault doesn't work in Firefoxevent.preventDefault 在 Firefox 中不起作用
【发布时间】：2017-11-06 21:59:36
【问题描述】：

我不知道为什么，但由于某种原因，event.preventDefault() 调用在 Firefox 中不起作用。我正在使用它来阻止单击 a 链接将您重定向到 href 并运行单击功能。标记如下：

jQuery:

$('.sub-list-click a').click(function() {
    event.preventDefault();

    var sub = $(this).parent("li").next(".sub, .homepage-sub");

    if (sub.css('display') == 'none') {

        $(".sub, .homepage-sub").slideUp();
        $(".sub, .homepage-sub").children("li").animate({
            opacity: "0"
        }, 10);               

        setTimeout(function() { 
            sub.slideDown();                  
        }, 200);
        setTimeout(function() {
            sub.children("li").animate({
                opacity: "1"
            }, 200); 
        }, 500);   

    } else {
        sub.slideUp();
    }      

    return false;
});

它适用于我测试过的所有其他浏览器，只是 Firefox 似乎有一些问题。

【问题讨论】：

我希望您需要传入 event 作为参数：$('.sub-list-click a').click(function(event) {。
尽管如此，return false; 替换了 event.preventDefault(); 和 event.stopPropagation();，所以只需删除 event.preventDefault();。

标签： javascript jquery html firefox

【解决方案1】：

您需要像这样在点击函数处理程序中添加事件作为参数：

$(document).ready(function () {
    $('.sub-list-click a').click(function (event) {
        event.preventDefault();
        var sub = $(this).parent("li").next(".sub, .homepage-sub");

        if (sub.css('display') == 'none') {
            $(".sub, .homepage-sub").slideUp();
            $(".sub, .homepage-sub").children("li").animate({
                opacity: "0"
            }, 10);

            setTimeout(function () {
                sub.slideDown();
            }, 200);
            setTimeout(function () {
                sub.children("li").animate({
                    opacity: "1"
                }, 200);
            }, 500);

        } else {
            sub.slideUp();
        }
    });
});

还请注意，此示例包含在 document.ready 事件中（您可能已经这样做了，但由于不明显，我将其添加为注释）

此处的“工作”示例（阻止以下链接，而不是任何动画内容）：
http://fiddle.jshell.net/79uuqmho/1/

编辑/更新：
它在 Firefox 中不起作用的原因是因为使用 event.something 会给您一个事件未定义错误，它会停止执行您的脚本。另一方面，Chrome 没有给出该异常（可能是由于在 window 对象中的某处定义了事件）并允许脚本向下执行以返回 false；（与 {event.preventDefault(); /* AND */ event.stopPropagation();}

相同

【讨论】：

请注意，事件不需要命名为事件，您可以将其命名为 e、ev 或任何您想要的名称 :)
啊，是的，很抱歉在初次发布后将其删除。我删除它的两个原因是 1： event.preventDefault() 做了你想做的事，所以返回 false 不是必需的。其次，return false 也停止事件传播，即“事件冒泡”，如果您希望它停止事件的默认操作并阻止事件在 DOM 树中“冒泡”，您可以调用 return false;或 event.preventDefault();和 event.stopPropagation();。但是，如果您只希望它阻止链接将用户移动到另一个站点，则 preventDefault() 只会这样做，仅此而已
fiddle.jshell.net/ruysoyjz/2
我已经告诉 cmets return false; 做了什么，但是是的：我的问题 更喜欢使用 event.preventDefault();返回 false; 听起来有点不正确。我的问题的主要思想是你是否知道return false;做了什么:)顺便说一句，它是“冒泡”，而不是“向下”。
没错，措辞是“冒泡”，（对不起，我太专注于编写演示了，我忘了你说过你知道它的作用：P）但对于那些不是曾经使用事件驱动的 GUI，可能很难理解冒泡意味着在 GUI 中“向下”遍历（或朝向控制树根）。这就是为什么我在它周围使用引号的原因（再说一次，我非常喜欢构建一个演示，我以为我已经将它命名为冒泡一次，似乎我没有:)）

【解决方案2】：

在您的事件方法参数中使用任何对象，即：

$('.sub-list-click a').click(function(e) {
    e.preventDefault();
    // other code
}

【讨论】：