clicking an <img> preventing the activation of the <a>

Question

Hi all, I'm trying to implement a bookmarklet where the user will click one <img/> and will be redirected to another page where he will annotate the image.

if the image is inserted within a HTML anchor:

<a href="http://anywhere.org"&gt;&lt;img src=""http://anywhere.org/image.png"/&gt;&lt;/a&gt;, 

can I prevent the anchor to be activated? I tried

event.stopPropagation();

and/or

event.preventDefault();

but it didn't work

thanks.

Answer 1

First you can check if the event can be cancelated or not using:

var bool = event.cancelable;

And you can always try the classic

return false:

That will pretty much stop it.

Answer 2

You should use event.cancelBubble and return false (for IE).

But your method works fine in FF.

  var stop = function(evt)   {
     evt = evt || window.event;


     if(typeof(evt.stopPropagation) === "function") {
        evt.stopPropagation();
     }

     if(typeof(evt.preventDefault) === "function")   {
        evt.preventDefault();
     }

     // this is for IE6
     evt.cancelBubble = true;         
     return false;
  };