prevent map area click to reload the page

Question

http://jsbin.com/iTeNiJIt/1/edit?output

I have a few map areas in my page. On clicking of any of these areas, i wish to create some animation within the same page. The problem is that the page is refreshed every time i click the area. Even after using the stopPropagation() method, i am unable to keep it that way. I just need to invoke some methods if the area of an image is clicked. Is there some better way ??

Answer 1

event.stopPropagation and return false; aren't the same thing. Return false on the click handler and you're all set.

$('map[name=blueBall] area').on('click',function(e){
    //... snip ...
    e.stopPropagation();
    return false;
});

Good stuff:
What's the difference between e.preventDefault(); and return false?
What's the difference between event.stopPropagation and event.preventDefault?