Is there a good way to enable the “open link in a new window” browser menu option on a dom node, without making the link followed on-click?

Question

I want to have a complex dom node have the "open link in new window" context menu option, like you have with any standard <a> tag link. But I don't want that dom node to open up that link when clicked. What are my options?

The option I'm doing right now is causing me trouble. I'm currently setting up a click handler on the <a> node that calls event.preventDefault() . The problem with this is that it prevents the default on EVERYTHING inside that <a> tag. If I have a checkbox, for example, the checkbox becomes unselectable by mouse click. I can futz around with stuff so that it works out (by using stopPropagation() in the right places), but this is incredibly confusing and will likely waste me and my team hours in the future. Is there a less hacky way of doing this?

Example of the type of html I have:

<a href="www.whatever.ninja">
  <input type='checkbox'/>
  <div contenteditable="true">Your cursor could be |here!</div>
  <div>More content...</div>
</a>

Answer 1

I'd add a class to the <a> tag, and then make your preventDefault call only apply to elements with that class. That way, you can style it so that it doesn't look like a link, as well. Are you using something like jQuery? You could do something like this:

$(document).ready(function() {
    $('a.non-clickable').click(function() {
        $(this).preventDefault();
    });
});

and then in your html:

<a href="mylink" class="non-clickable">Some link text</a>