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>

score 0 · Answer 1 · answered Aug 24 '15 at 05:12

0

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>

answered Aug 24 '15 at 05:12

Phil Cairns

758
4
15

I have a complex dom node *inside* the tag. I'll add an example of what I have. – B T Aug 24 '15 at 05:14
So how does the class help me prevent the default of the tag without preventing the default of my checkbox? – B T Aug 24 '15 at 05:15
1

You might want to have a look here: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct. The upshot is: 'HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)"'. – Phil Cairns Aug 24 '15 at 05:23
Hmm, interesting. I'm not having problems with interactive elements in chrome - other than that it looks like i'm simply not given enough degrees of freedom. – B T Aug 24 '15 at 05:28

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?

1 Answers1