I believe most of the issues with broken link behaviour results from the lack of higher-level methods to override the default link behaviour.
An example: I don't really want to add a click event listener to a link to make it display in a modal (or whatever). Because this event is too low-level and now my listener needs to check modifier keys. What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead". The user is still free to open their links in new windows or tabs and my code will not be triggered for those cases.
A CSS example: I don't really want to set cursor images for every element and pseudo-class. I'm forced to list every element that uses the cursor I'm overriding. What I really want is to tell the browser "use this custom cursor image wherever you were going to use the default (hand/wait/resize/etc) cursor". My code would then be future-proofed for new elements/UI.
Sometimes I feel that certain browser APIs suffer from the XY problem.
> What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead".
This is pretty doable using javascript - just register an onclick on the <a> tag and have your event handler cancel the default navigation behaviour. Your website will then continue to work great even if the user has javascript disabled. And all the built in browser behaviour (like the right click "link" menu, and ctrl+click) still works perfectly.
That said, this is a pretty obscure "trick". It would certainly be nice if the DOM API made this easier to do.
Is there really anything easier to do? If you're disabling the default event, you're doing it to provide some other functionality, which is necessarily going to involve writing a function to attach to a handler, and adding event.preventDefault() at the top is about as easy as it gets. Anything easier would involve eliminating the attached handler, which doesn't make a lot of sense.
Also, .preventDefault() wasn't obscure in the jQuery era; if it's obscure now that's a sad commentary.
In my experience in this case you need to explicitly filter out middle-click, ctrl-click, cmd-click and whatever other features the browser may offer. Otherwise you will accidentally prevent them too. I would love if there was a more specific event that avoided this problem.
An example: I don't really want to add a click event listener to a link to make it display in a modal (or whatever). Because this event is too low-level and now my listener needs to check modifier keys. What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead". The user is still free to open their links in new windows or tabs and my code will not be triggered for those cases.
A CSS example: I don't really want to set cursor images for every element and pseudo-class. I'm forced to list every element that uses the cursor I'm overriding. What I really want is to tell the browser "use this custom cursor image wherever you were going to use the default (hand/wait/resize/etc) cursor". My code would then be future-proofed for new elements/UI.
Sometimes I feel that certain browser APIs suffer from the XY problem.