自定义光标不允许点击？JS

Question

我正在尝试为我网站的某些元素创建自定义光标，我遇到的唯一问题是虽然它工作正常，但我无法再单击元素。有谁知道这可能是什么原因造成的？

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

您的自定义光标阻止鼠标点击到达底层页面。

无需使用 z-indexes 或主动隐藏/显示光标来解决此问题；pointer-events为此目的而存在：

#follower {
    pointer-events: none
}

任何指针（鼠标或触摸）事件现在都将落入自定义光标后面的任何内容。请注意，这包括:hover事件，因此标准悬停光标将出现在链接上，除非您取消它；例如：

a:hover {cursor: none}