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

});