JSFiddle - React, Tailwind, and code Playground

by ghostoy

HTML

<a href="https://www.google.com" target="_external">Normal link</a>
<a href="https://www.google.com" target="_external"><b>Link contains inner tags</b></a>
<a href="https://www.google.com" target="_external" onclick="event.stopPropagation()">link with stopPropagation</a>
<pre id="output"></pre>

JavaScript

var $output = $('#output');

// Delegate click event on document so that we can handle dynamically created links.
// This handler is registered in "capture phase" of event firing
// (http://www.quirksmode.org/js/events_order.html), which is rarely used in normal
// web pages. This will handle links which was prevented to bubble up the event to
// document.
document.addEventListener('click', function(evt) {
    $output.text('click on ' + evt.target.tagName);
    
    // find closest link in case of clicking on inner tags of <a/> to handle inner tags
    var $a = $(evt.target).closest('a[target=_external]');
    if ($a.length) {
        var gui = require('nw.gui');
        gui.Shell.openExternal($a[0].href);  // Open in default Browser
        evt.preventDefault();
    }
}, true); // set to true to listen to event in capture phase

// create a link dynamically
$('<a>')
.attr({
    'href': 'https://www.google.com/',
    'target': '_external'})
.text('Dynamic created link')
.insertBefore($output);