preventing default behaviour in a <a>

[Violet_82]

Hi there, I am in a bit of a situation here trying to prevent the browser from following a link within a <a>
This is the html code:

                <a href="#" onclick="changeImage(this,'/folder/images/23.jpg');">
                    <img src="/folder/images/23_thumb.jpg" alt="">
                    <span>this is it</span>
                    <h3>This is it</h3>
                    <p class="caption">lorem ipsum...</p>
                </a>

and here's the script:

function changeImage(calledFrom, big_image){    
    var newImage = $('#placeholder_image');
    var newTitle = $(calledFrom).find('h3').html(); 
    var newText = $(calledFrom).find('p').html();
    newImage.fadeOut(50, function(){
        newImage.attr('src', big_image);
        }).fadeIn(900);
    $('.car_model_description')
        .find('h3').html(newTitle).end()
        .find('p').html(newText);
        Cufon.replace('.car_model_description h3');
        Cufon.replace('.car_model_description p');      
}
function resetThumbnails(){
    $('.thumbnails a').each(function(){     
        $(this).stop(true, true).fadeTo(500,1);
    });
}

$(document).ready(function(){
    $('.thumbnails')
        .mouseleave(function(){
                resetThumbnails();
            })
        .find('a').hover(function(){
                hoverThumbnail(this);
            });
});

function hoverThumbnail(calledFrom){
        var $calledFrom = $(calledFrom);
        $('.thumbnails a').each(function(){             
                if($(this).get(0) == $calledFrom.get(0)){
                    $(this).fadeTo(0,1);
                }
                else {
                    $(this).fadeTo(0,0.5);
                }
            });
}

Now, to stop the default behaviour I could simply add a return:false; after the javascript call in the html but the problem is that I need the link to be activated if people click on what's on the span tag. The way the script at the moment is that when users click on the thumbnail image the big image will change accordingly but when they click on the text in the span I need that text to be a link and I need the browser to follow that link only in that particular situation. Does it make sense?
I wonder how I can do that. If I add the return:false; the link won't work at all, but I need a way to stop the link from working when they click on the thumbnail and to work when they click on the text.
any idea?is it doable?
thanks

[ckchaudhary]

how about this: (i haven't tested it)
1) you return false on click of <a>
2) you bind a function to the <span> which is inside <a>, the fuction picks the link from its parent's href attribute and then loads that url..
something like:

$("a.someclass span").click(function(){
    var link_to_go = $(this).parent().attr('href');
    window.location.href = link_to_go;
});

[Violet_82]

hi thanks, I guess it is a solution but the thing is it will be accessible only to people with js on, if they switch it off or if they use devices that don't use js, then they won't be able to use that functionality

[lambing]

JavaScript is an essential part of a web site, I think there are no more supported devices that are aren't using JavaScript.

just refactoring some code above, but that really works even without testing:

$("a.someclass span").click(function(){
    window.location.href = $(this).parent().attr('href');     
});

[ckchaudhary]

@Violet 82

but the thing is it will be accessible only to people with js on, if they switch it off or if they use devices that don't use js

well.. the code sample that you were trying with and have posted here is javascript!! so i thought using javascript is cool with you..
another thing, no one deliberately turns javascript off in the world of facebook and google. There are mobile devices which wont do javascript but then for them you need to change your given markup drastically, and that's a completely separate concern

[Troy III]

            <img onclick="changeImage(this,'/folder/images/23.jpg');
                                src="/folder/images/23_thumb.jpg" alt="">
            <a href="theurl">
                <span>this is it</span>
                <h3>This is it</h3>
                <p class="caption">lorem ipsum...</p>
            </a>

[Violet_82]

thanks peeps

[jwelsh]

I would also add to the good answers above, that you can also do the following to change the behavior of a hyperlink click event with jQuery:

$('#my_a_tag_id').click(function(e) {
    e.preventDefault(); // this will prevent the browser from following the link

    // perform whatever action you desire
});