img in anchor, override default from onclick

[Dan East]

I am dynamically appending an img to the inner HTML of an element, to add in help in the form of a clickable icon next to select elements. When the img is added to an anchor the image of course becomes part of the link, and clicking the image invokes the anchor's action. The img has an onclick handler which triggers the dynamic help pop-up. My problem is that I can't seem to block the default anchor action, and thus the anchor is invoked also. The img onclick handler is called before the anchor event is processed (an alert popup will block the anchor's execution until the alert is dismissed), but returning false from it does not block the anchor's action.

Any suggestions? I can move the img element to be a peer of the anchor element instead of a child, but I would like a programmatic fix instead of changing the way it interacts with the DOM if possible.

Thanks.

[Old Pedant]

Well, not to ask a dumb question, but why do you need onclick on both the image and the <a> element???

Why not just stop using the onclick in the <img> when it's part of an <a> and instead use the <a>'s own onclick handler to perform both functions? If the user asks for help, you give it and return false. If not, you return true to allow the <a>'s href to activate.

But, yes, you *can* cancel "bubbling" so that the inner onclick is not seen by the outer element.

Google for "hot to cancel bubbling".

[Dan East]

Thanks for the reply. The img provides pop-up help describing the anchor. So the functionality of the link is different from that of the img when clicked.

I went ahead and added the img to the parent element of the anchor, appending it after the anchor, and it seems to render fine for this usage. I was concerned about CSS in some cases causing the layout to flow differently so the icon would not be to the right of the anchor element, but I guess putting the img element inside the anchor wouldn't necessarily help anyway.