Selectable Hyperlinks

by Asif Sharif Shahid

HTML

<span data-href="javascript:alert('This is the click action.');" class="link selectable">
  <span>[email protected]</span>
</span>

CSS

body {
  padding: 100px;
}
.link {
  font: 16px/0 Tahoma, sans-serif;
  padding: 15px 30px;
  border: 1px solid #0079be;
  border-radius: 4px;
  color: #0079be;
  text-decoration: none;
  cursor: pointer;
}

.link.selectable > span {
  display: inline-block;
}
.link.selectable.selecting > span {
  cursor: text;
}

JavaScript

$('.link.selectable > span').hover(
  function() {
    var selectableTimeout = setTimeout(
      function(elem) {
        $(elem).parent().addClass('selecting');
      },
      500, this
    );
    $(this).data('selectableTimeout', selectableTimeout);
  },
  function() {
    clearTimeout($(this).data('selectableTimeout'));
    $(this).parent().removeClass('selecting');
  }
);
$('.link.selectable').mousedown(
  function(e) {
    $(this).data('mouseX', e.pageX);
    $(this).data('mouseY', e.pageY);
  }
);
$('.link.selectable').mouseup(
  function(e) {
    var mouseX = $(this).data('mouseX');
    var mouseY = $(this).data('mouseY');
    if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) {
      window.location.href = $(this).attr('data-href');
    }
  }
);