CODEWITHSUNDEEP
javascriptcsshtmlhref
Matthew Beckman
Matthew Beckman

Reputation: 1722

Making images or divs within <a> exempt from becoming link

I'm looking for a way to make an entire <div> a link but not the content in it. Say for example I've got four images in a <div> and if you click anywhere but the images, it will actually be a link. I need it to function that way since I'm using it for a lightbox. Anytime you click anywhere but the images, it will have the attribute <a href="#close">. I need the ability to scroll through the images from anywhere on the screen, so it's container must remain 100% height and width. I've also found Javascript solutions to make the entire <div> clickable, but I can't find out how to make it so it can still scroll and exclude the images from the <a>.

Here's my Code Pen

Upvotes: 0

Views: 86

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 219938

You'll have to resort to JavaScript for that:

document.getElementById('link').addEventListener('click', function (e) {
    if ( e.targetElement != this ) e.preventDefault();
});

Upvotes: 1

Related Questions