event.preventDefault() working in Chrome, but not in Firefox / IE

Question

I know there are already a lot of questions on this subject, but I've read a lot of them and still couldn't get my script to work ...

I have a very basic slideshow which can be seen here : www.screations.net/wm (there are 3 slideshows, I have the same problem on all 3 of them)

Here is the code i use for the navigation :

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

And the jQuery (simplified) :

function nextSlide()
{
    $('.slide').eq(0).fadeIn(fadeSpeed);
    event.preventDefault();
}

function prevSlide()
{
    $('.slide').eq(0).fadeOut(fadeSpeed);
    event.preventDefault();
}

Now this works fine on Chrome, but on Firefox / IE, while the script still works, it reloads the page. How can I fix this please ? :/

Thank you

Answer 1

Seeing at the function body, there buble up two obvious problems

function nextSlide(){
 $('.slide').eq(0).fadeIn(fadeSpeed);
 event.preventDefault();
}

You didn't pass event, therefore when invoking this function, JS assumes that event comes from global scope. Second, you'd usually want to prevent default action before starting doing anything, like this:

function nextSlide(event) {
 event.preventDefault(); // <- That should come first
 $('.slide').eq(0).fadeIn(fadeSpeed);
}

And lastly, it doesn't make too much sense to use inline JavaScript when you have already included jquery.

So, I'd rewrite your thing as:

$("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

You can't expect the event to be prevented if you don't pass it into the function.

Change your links as follows:

onclick="nextSlide(event);"

Then, change your function as follows:

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

Answer 3

You run and you need to pass the event into the function.

You typically run event.preventDefault() before you do other stuff, but it's not 100% necessary.

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