You can't have interactive elements inside anchor tags. Very often the box will have some additional buttons for different actions, like "Save for later". I like the approach of using an anchor tag just for the title and have another click handler on the box to serve as a fallback, but you don't get to ctrl-click on the box anymore. Alternatively you can have the link be a sibling of the buttons in the DOM, but visually cover the whole box and appear behind the buttons. As you can imagine, any solution like this is going to add more work and be a potential source for bugs.

This is one of the two things that I really wish browsers would fix, instead of cramming in completely new features. The second is how hard is it to make popovers work correctly, especially inside scrollable containers.

Cant you just use event.stopPropagation on the inner button’s event handler to stop the browser from following the link? Of course this requires JS but I assume you’re using Js if you have custom buttons.

You can, but you can also see how it isn't an elegant solution. What if the user has javascript disabled? Do you also have to capture the click for the space around the interactive spots so a misclick into whitespace doesn't click the link?

It is what is normally done but it isn't perfect.

The post I was replying to was specifically lamenting the inability to have interactive elements inside of anchor tags, which I think is solved by event.stopPropagation. If you have a button in an anchor tag and it's not a submit button, you need JS for the button to work anyways.

Oh, that's a problem.

That really looks like a task for image maps, except that they only work for images. Yeah, I agree with those two problems.

Sites breaking "ctrl+click" or open in a new tab shortcuts are the worst. Even JIRA does it on text ticket links, and it's a power user focused tool. Very frustrating.