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

});

Answer 2

如果不将事件传递给函数，则无法预期事件会被阻止。

按如下方式更改链接：

onclick="nextSlide(event);"

然后，按如下方式更改您的功能：

function nextSlide(event){ // <-- Accept the event parameter here...
    // Move this first in the function....
    event.preventDefault();
    $('.slide').eq(0).fadeIn(fadeSpeed);
}

Answer 3

您运行并需要将事件传递给函数。

您通常在执行其他操作之前运行event.preventDefault（），但这不是100％必需的。

$(function(){
    $("img.nextSlide").on("click",function(e){
        e.preventDefault();
        $('.slide').eq(0).fadeIn(fadeSpeed);
    })

    $("img.prevSlide").on("click",function(e){
        e.preventDefault();
        $('.slide').eq(0).fadeOut(fadeSpeed);   
    })
})

event.preventDefault（）在Chrome中运行，但在Firefox / IE中没有

3 个答案: