event.preventDefault()在Chrome中运行,但在Firefox/IE中没有

Question

我知道关于这个问题已经有很多问题,但是我已经阅读了很多这些问题但仍然无法使我的脚本工作......

我有一个非常基本的幻灯片,可以在这里看到: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上,虽然脚本仍然有效,但它会重新加载页面.我该如何解决这个问题？:/

谢谢

Answer 1

看到功能体,有两个明显的问题

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);

});