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

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

});

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

Comments

[Bergi]

No. event.preventDefault just needs to be called within one of the handlers.

[random_user_name]

@Bergi - good catch. I was confusing inline script with other applications.

[Johnston]

@Bergi Ok you are right, it's not 100% necessary. But you do typically do it for readability. Edited my answer.

[Yang]

He's using classes, not ids. A selector should be img.slideNext not #slideNext

[Bergi]

Hardly. Only the event identifier should be available for the event object in inline attribute handler code. You might use function nextSlide(e) { e.preventDefault(); … } of course.