Custom cursor doesn't allow click? JS

Question

I'm trying to create a custom cursor for certain elements of my site, the only issue I'm having is that although it works fine, I can no longer click elements. Anybody know what might be causing this?

http://codepen.io/liamgallagher/pen/MmprwR

$('a').on('click',function(){
  alert('sad');
});

(function() {
  var follower, init, mouseX, mouseY, positionElement, printout, timer;

  follower = document.getElementById('follower');

  printout = document.getElementById('printout');

  mouseX = (function(_this) {
    return function(event) {
      return event.clientX;
    };
  })(this);

  mouseY = (function(_this) {
    return function(event) {
      return event.clientY;
    };
  })(this);

  positionElement = (function(_this) {
    return function(event) {
      var mouse;
      mouse = {
        x: mouseX(event),
        y: mouseY(event)
      };
      follower.style.top = mouse.y + 'px';
      return follower.style.left = mouse.x + 'px';
    };
  })(this);

  timer = false;

  window.onmousemove = init = (function(_this) {
    return function(event) {
      var _event;
      _event = event;
      return timer = setTimeout(function() {
        return positionElement(_event);
      }, 1);
    };
  })(this);

}).call(this);

Answer 1

Your custom cursor is preventing mouse clicks from reaching the underlying page.

There's no need to hack around with z-indexes or actively hiding/revealing the cursor to solve this; pointer-events exists for this purpose:

#follower {
    pointer-events: none
}

Any pointer (mouse or touch) events will now fall through to whatever is behind your custom cursor. Note that this includes :hover events, so the standard hover cursor will appear on links unless you suppress it; for example:

a:hover {cursor: none}