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

});

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