JSFiddle - React, Tailwind, and code Playground
by grammar
HTML
<a href="http://residentadvisor.net" target="_blank">target blank</a>
<br>
<a href="http://residentadvisor.net">hold cmd</a>
JavaScript
$(function(){
var $links = $('a'),
hrefPrefix = "http://localhost:3000/tracker.html?url=";
// Build out and add the URL as a data-attribute to each anchor
// tag, so we can replace it on `mousedown`
$links.each(function(idx, itm) {
var $item = $(itm),
href = $item.attr('href'),
newUrl;
href = window.encodeURIComponent(href);
newUrl = hrefPrefix + href;
$item.data('destination', newUrl);
});
$links.on('mousedown', function(e) {
// Replace the `href` attribute with the URL built above,
// which will send the user to the Click Tracker page,
// which will then redirect user to the destination.
$this = $(this);
$this.attr('href', $this.data('destination'));
console.log('mousedown event', $this.data('destination'));
});
$links.on('click', function(e) {
console.log('click event... redirecting to ' + $this.attr('href'));
});
});