3

这似乎适用于几乎所有浏览器，除了 IE8（可能还有 IE7，但我还没有尝试过），我不知道为什么。

$('body')
    .on('click', '.toggle', function(e){
        $(this).toggleClass('active');
        e.preventDefault();
        e.stopPropagation();
    });

我注意到，当我单击分类为 的链接时toggle，浏览器会转到页面顶部，尽管e.preventDefault(). 在调查问题时，我看到了返回 false 或 setting 等解决方案event.returnValue = false。我已经通过首先测试e.preventDefault()然后在不满足条件时执行替代方法来尝试这两种方法。

设置返回值：

$('body')
    .on('click', '.toggle', function(e){
        if (e.preventDefault()) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        $(this).toggleClass('active');
    });

我也尝试过设置returnValue全局事件对象，而不是e像一篇文章中建议的那样传递到绑定函数中。

我的尝试返回错误：

$('body')
    .on('click', '.toggle', function(e){
        if (e.preventDefault()) {
                e.preventDefault();
            }
        $(this).toggleClass('active');
        return false;
    });

尽管有所有这些不同的尝试，IE8 仍采用链接的默认操作，而不是切换类。我在这里做错了什么？我正在使用 jQuery 1.10.2。

更新：找到问题的根源。谢谢大家的帮助。我有条件地包含了一些非 IE 的脚本元素，这个脚本就是其中之一。返回 false 现在对我有用。非常感谢你把我推向正确的方向！

4

2 回答 2

3

您的 JS 在此处以外的其他地方出现错误 - 它正在停止执行，因此您的事件处理程序永远不会被绑定。

打开开发工具 (F12) 并刷新您的页面，您将看到一个脚本错误。这就是造成问题的原因。

另外，请记住

e.preventDefault();
e.stopPropagation();

是相同的

return false;

无论如何， stopPropagation() 和绑定到 body 元素的事件处理程序也有点奇怪，尽管我猜它会阻止事件冒泡到文档......

编辑#2

发生了 3 件事之一 - 1）您的代码中有错误在其他地方停止执行并且处理程序没有被绑定，2）事件处理程序内部的代码中有错误（不是来自您发布的内容）或 3）您在 IE8 中特别取消绑定此事件处理程序（或 body 元素上的所有事件处理程序）（不太可能）。

开始添加一些console.log 以确定上述哪一项导致您的问题。

非常清楚，您的事件处理程序应如下所示：

$('body').on('click','.toggle',function(e) {
     e.preventDefault();
     $(this).toggleClass('active');
});
于 2013-09-24T16:56:00.650 回答
2

在 IE8event对象中没有preventDefault方法。在你的代码中调用它会在控制台中给你这样的错误：

TypeError: Object #<MouseEvent> has no method 'preventDefault'

此错误会导致脚本立即停止，因此锚可以执行其主要工作，即跟随 href。而不是那种用途：

$('body').on('click', '.toggle', function(e){
    $(this).toggleClass('active');
    return false;
});
于 2013-09-24T17:03:41.273 回答