Prevent click event jquery

Question

I have a number of list items that contain images within links. When one of these links is clicked, I want to get containing li's rel attribute only, without following the click event though. Following the event through currently opens the link image up in a new page which I do not want.

I have tried return false; within my function but this doesnt work (see below). I have also tried this on the actual link in the mark up but I would rather not do this as this isn't best practice.

 $('a.main-img').click(function (){

    var liRel = $(this).closest('li').attr('rel');
    var relNumber = $('#banner-holder').find('img').attr('id', liRel);
    rotatePics(relNumber);

    return false;

});

Answer 1

Note though that preventDefault wont stop the event from bubbling up the DOM and being actioned by and event on one of the parents. The function event.StopPropagation will do that. PreventDefault stops the default action of the link. Return false actually does both so using preventDefault won't be an exact functional replication of return false.

This SO question gives a comprehensive run through.

Probably won't make a difference in this case but when it does it has really confused me in the past

Answer 2

You should learn about event.preventDefault() and event.stopPropagation()

event.preventDefault()

event.stopPropagation()

Answer 3

http://api.jquery.com/event.preventDefault/

Read, here you have an example.

EDIT: Your corrected code will be like this:

 $('a.main-img').click(function (event){
     event.preventDefault();
    var liRel = $(this).closest('li').attr('rel');
    var relNumber = $('#banner-holder').find('img').attr('id', liRel);
    rotatePics(relNumber);    
 });

Answer 4

Try:

 $('a.main-img').click(function (evt){
    evt.preventDefault();