Why is the onclick event not firering on my anchor with an image inside it?

Question

I'm working on copy to clipboard using the zeroclipboard api,. I made a simple test page with an HTML anchor as follows:

<a href="#" id="copy" >copy</a>

By clicking on copy link, the text is copied to clipboard, all js events are firing and are being logged properly into the console, but when I change the example above to have an image inside the anchor for better user experience:

<a href="#" id="copy" ><img src="copy.gif" alt="copy"/></a>

...the code does no longer work and no events are fired.

Could it be that the `img` is receiving the click event rather than the link tag? Have you tried adding either ids or classes to the elements and testing where the click is going?? Also, are you looking to copy the alt text of the image to the clipboard, or the image itself?? — , Oct 10 '11 at 13:15

score 2 · Accepted Answer · answered Oct 10 '11 at 13:10

2

Set the image as the background image of the a element using CSS.

#copy {
    background-image: url('copy.jpg')
    display: block
    width: XXXpx
    height: YYYpx
}

You can use display: inline-block if you want the a element to behave more like a span.

answered Oct 10 '11 at 13:10

knite

6,033
6
38
54

Thanks it did worked for me, i wonder why it didn't came to my mind. I think GOD want you to help me.Thanks – Haseeb Asif Oct 10 '11 at 14:18

Why is the onclick event not firering on my anchor with an image inside it?

1 Answers1