Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post

    img in anchor, override default from onclick

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,941
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    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".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •