禁用点击锚标签下的img标签

Question

I have an img tag under anchor tag, i dont want click on img tag, i tried disabled property, it seems there is no such property for img tag.Please let me know how to disable click on img.

code:

<a href="google.com"><img src="sample.png"></img></a>

Thankyou

Answer 1

With CSS, you can use pointer-events property:

img {
    pointer-events: none;
    cursor: default;
}

You can check browser support for this property here .

Btw, <img></img> is not valid HTML markup. You need to use <img />

Fiddle Demo

Answer 2

To prevent the default behavior we can use event.preventDefault() method of the event. Older browsers (ie 7 and below) dont support this method, so we have to use onclick="return false;"

Note:

I added simple text with in the link, to demonstrate the image click is disabled but when we click the text, the anchor click gets activated.

function onimgclick(event) {
    if(event.preventDefault)
        event.preventDefault();
    else {
        return false;
    }
}

And the html markup should be

<a href="google.com"><img onclick="return onimgclick(event)" src="sample.png"></img> HI</a>

Answer 3

Check this question, is it the thing you want? Disable link using css

So that your code will be...

<a href="google.com" style="pointer-events: none;  cursor: default;">
    <img src="sample.png" />
</a>

By the way, in HTML the img tag has no end tag. http://www.w3schools.com/TAGS/tag_img.asp