1

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 ??

ishan
  • 1,202
  • 5
  • 24
  • 44
  • change the href's to href="javascript:;" The reason it is refreshing is because having a # takes the user to the top of the current page and leaving it blank refreshes the page. adding javasript:; to the href tricks it into thinking it needs to run some javascript so no more refresh. – Toby Osborne Feb 03 '14 at 20:55

1 Answers1

2

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?

Community
  • 1
  • 1
Will
  • 4,075
  • 1
  • 17
  • 28
  • Don't have IE handy but adding `return false` works fine for me in Firefox. Something else change? – Will Feb 04 '14 at 18:47
  • I think event propagation issue is resolved. But i am having problem with the 'event' thing. Check this - http://stackoverflow.com/questions/21554197/using-the-event-parameter-inside-jquery-on-does-not-work-in-firefox-and-ie-bu Maybe you could help – ishan Feb 04 '14 at 18:52