CODEWITHSUNDEEP
javascriptjqueryfirefoxpreventdefault
Kanjiro
Kanjiro

Reputation: 45

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

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

Upvotes: 3

Views: 22162

Answers (3)

Johnston
Johnston

Reputation: 20884

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

Upvotes: 0

Yang
Yang

Reputation: 8701

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

});

Upvotes: 8

random_user_name
random_user_name

Reputation: 26160

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

Upvotes: 1

Related Questions