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

});