Question

1

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

rated 0 times [ 3] [ 2] / answers: 1 / hits: 22197 / 10 Years ago, sun, may 4, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacyl

Add To Favorites

Follow

Total Points: 131

Total Questions: 105

Total Answers: 94

Location: Egypt

Member since Tue, May 3, 2022

2 Years ago

answered 10 Years ago benitoh · Accepted Answer

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



});