javascript 简单的 jQuery 单击事件绑定在 IE8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18987560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple jQuery click event bind not working in IE8
提问by raddevon
This seems to work in nearly every browser except IE8 (and probably IE7, but I haven't tried that yet), and I'm not sure why.
这似乎适用于除 IE8（可能还有 IE7，但我还没有尝试过）之外的几乎所有浏览器，我不知道为什么。
$('body')
.on('click', '.toggle', function(e){
$(this).toggleClass('active');
e.preventDefault();
e.stopPropagation();
});
I notice when I click a link classed toggle, the browser goes to the page top despite the e.preventDefault(). In looking into the problem, I've seen solutions like returning false or setting event.returnValue = false. I've tried both of these by first testing for e.preventDefault()then executing the alternative if the condition is not met.
我注意到当我单击分类的链接时toggle，浏览器会转到页面顶部，尽管e.preventDefault(). 在调查问题时，我看到了诸如返回 false 或 setting 之类的解决方案event.returnValue = false。我已经通过首先测试e.preventDefault()然后在不满足条件的情况下执行替代方法来尝试这两种方法。
Setting return value:
设置返回值：
$('body')
.on('click', '.toggle', function(e){
if (e.preventDefault()) {
e.preventDefault();
} else {
e.returnValue = false;
}
$(this).toggleClass('active');
});
I've also tried that one by setting returnValueon the global event object rather than the epassed into the bound function as was suggested in one post.
我还尝试过设置returnValue全局事件对象，而不是e像一篇文章中建议的那样传递给绑定函数。
My attempt returning false:
我的尝试返回 false：
$('body')
.on('click', '.toggle', function(e){
if (e.preventDefault()) {
e.preventDefault();
}
$(this).toggleClass('active');
return false;
});
Despite all these different attempts, IE8 is taking the link's default action andis not toggling the class. What am I doing wrong here? I'm using jQuery 1.10.2.
尽管进行了所有这些不同的尝试，IE8 还是采用了链接的默认操作，而不是切换类。我在这里做错了什么？我正在使用 jQuery 1.10.2。
Update:Got to the root of the issue. Thanks, everyone, for the help. I had conditionally included some script elements for non-IE, and this script was one of them. Returning false is doing the trick for me now. Thanks so much for pushing me in the right direction!
更新：找到了问题的根源。谢谢大家的帮助。我有条件地为非 IE 包含了一些脚本元素，这个脚本就是其中之一。返回 false 现在对我有用。非常感谢你把我推向正确的方向！
回答by Adam
There's an error in your JS somewhere other than here - it's halting execution and therefore your event handler never gets bound.
您的 JS 中除此处以外的其他地方存在错误 - 它正在停止执行，因此您的事件处理程序永远不会被绑定。
Open up dev tools (F12) and refresh your page and you'll see a script error. This is what's causing the problem.
打开开发工具 (F12) 并刷新您的页面，您将看到一个脚本错误。这就是导致问题的原因。
Also, remember that
另外，请记住
e.preventDefault();
e.stopPropagation();
is the same as
是相同的
return false;
It's also kind of strange to stopPropagation() and an event handler that's bound to the body element anyway, although I guess it will stop the event from bubbling up to the document...
stopPropagation() 和绑定到 body 元素的事件处理程序也有点奇怪，尽管我猜它会阻止事件冒泡到文档......
EDIT #2
编辑#2
There's one of 3 things going on - 1) there's an error in your code somewhere else that halts execution and the handlers don't get bound, 2) there's an error in your code inside the event handler (there's not from what you posted) or 3) you unbind this event handler (or all event handlers on the body element) specifically in IE8 (unlikely).
发生了 3 件事情之一 - 1) 您的代码中的其他地方存在错误，导致执行停止并且处理程序未绑定，2) 事件处理程序中的代码存在错误（不是您发布的内容）或 3) 您专门在 IE8 中解除绑定此事件处理程序（或 body 元素上的所有事件处理程序）（不太可能）。
Start adding some console.log's to figure out which one of the above is causing your problem.
开始添加一些 console.log 以找出上述哪一项导致了您的问题。
To be perfectly clear, your event handler should look like this:
完全清楚，您的事件处理程序应如下所示：
$('body').on('click','.toggle',function(e) {
e.preventDefault();
$(this).toggleClass('active');
});
回答by matewka
In IE8 eventobject doesn't have preventDefaultmethod. Calling it in your code shall give you such error in console:
在 IE8 中event对象没有preventDefault方法。在你的代码中调用它会在控制台中给你这样的错误：
TypeError: Object #<MouseEvent> has no method 'preventDefault'
This error causes the script to stop immediatelyso the anchor can do its primary job which is follow the href. Instead of that use:
此错误会导致脚本立即停止，以便锚点可以完成其主要工作，即跟随 href。而不是使用：
$('body').on('click', '.toggle', function(e){
$(this).toggleClass('active');
return false;
});
