简单的 jQuery 点击事件绑定在 IE8 中不起作用

Question

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

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

我注意到，当我单击归类为 toggle 的链接时，尽管有 e.preventDefault()，浏览器仍会转到页面顶部。在调查问题时，我看到了返回 false 或设置 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 传递到绑定函数中。

我的尝试返回 false：

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

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

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

Answer 1

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

Answer 2

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

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

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

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