我知道已经有很多关于这个主题的问题,但我已经阅读了很多,但仍然无法让我的脚本工作......
我有一个非常基本的幻灯片,可以在这里看到:www.screations.net/wm(有 3 个幻灯片,我在所有 3 个上都有同样的问题)
这是我用于导航的代码:
<a href="#"><img src="images/arrow_right.png" class="nextSlide" onclick="nextSlide();"/></a>
<a href="#"><img src="images/arrow_left.png" class="prevSlide" onclick="prevSlide();"/></a>
和 jQuery(简化):
function nextSlide()
{
$('.slide').eq(0).fadeIn(fadeSpeed);
event.preventDefault();
}
function prevSlide()
{
$('.slide').eq(0).fadeOut(fadeSpeed);
event.preventDefault();
}
现在这在 Chrome 上工作正常,但在 Firefox/IE 上,虽然脚本仍然有效,但它会重新加载页面。我该如何解决这个问题? :/
谢谢
最佳答案
看函数体,有两个明显的问题
function nextSlide(){
$('.slide').eq(0).fadeIn(fadeSpeed);
event.preventDefault();
}
您没有传递event
,因此在调用此函数时,JS 假定event
来自全局范围。其次,您通常希望在开始执行任何操作之前阻止默认操作,如下所示:
function nextSlide(event) {
event.preventDefault(); // <- That should come first
$('.slide').eq(0).fadeIn(fadeSpeed);
}
最后,当您已经包含 jquery 时,使用内联 JavaScript 并没有多大意义。
所以,我会把你的东西重写为:
$("img.nextSlide").click(function(event){
event.preventDefault();
$('.slide').eq(0).fadeIn(fadeSpeed);
});
$("img.prevSlide").click(function(event){
event.preventDefault();
$('.slide').eq(0).fadeOut(fadeSpeed);
});
关于javascript - event.preventDefault() 在 Chrome 中有效,但在 Firefox/IE 中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23459408/