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-index: -1添加到#follower。 position上的非静态#follower在其他所有内容静态定位时为该元素提供默认z-index，因此没有其他内容具有z-index。堆叠顺序意味着当您点击时，您只需点击#follower元素。

$('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);

html {
  cursor: none;
  background: #666;
  height: 5000px;
}
#follower {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; /* Chrome, Safari, Opera */
  animation: pulse 4s infinite;
  background: rgba(200,0,0,0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com" target="_blank">Link</a>
<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

Answer 2

如果您想阻止正常光标在链接上方显示，那么您可以在脚本中添加以下行：

  clickElement = (function(_this) {
    return function(event) {
      var mouse;
      mouse = {
        x: mouseX(event),
        y: mouseY(event)
      };

      var followerDisplay = follower.style.display;
      follower.style.display = "none";
      var elementAtCursor = document.elementFromPoint(mouse.x, mouse.y);
      follower.style.display = followerDisplay;
      elementAtCursor.click();
    };
  })(this);

  window.onmouseup = (function(_this) {
    return function(event) {
      var _event;
      _event = event;
      return (timer = setTimeout(function() {
        return clickElement(_event);
      }, 1));
    };
  })(this);

在mouseup上获取位置，然后呈现follower元素display: none，以便使用document.elementFromPoint(x, y)将元素置于适当位置，然后follower获取它的display财产回来了。

缺点（或者不喜欢你）是重新开始动画。

因此，为了保持动画的运行，您可以使用visibility代替：

  follower.style.visibility = "hidden";
  var elementAtCursor = document.elementFromPoint(mouse.x, mouse.y);
  follower.style.visibility = 'visible';
  elementAtCursor.click();

Answer 3

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

没有必要乱用z索引或主动隐藏/显示光标来解决这个问题;为此目的存在pointer-events：

#follower {
    pointer-events: none
}

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

a:hover {cursor: none}

Answer 4

这似乎有点hacky但它确实有效。

JS

(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);

  $('#follower').on('mousedown', function(){
    // Hide the #follower element
    $(this).hide(); 

    // Set the hover event on anchor tags so this immediately gets called if we're over an anchor tag
    $('a').on('mouseover', function(){
      $(this).click(); // Click the anchor tag
      $('#follower').show(); // Show the #follower element again
    })
  });

  // Unbind the anchor tag mouseover event so we don't click anchor tags by moving the mouse quickly
  $(document).on('mouseover', function() {
    $('a').unbind('mouseover').show();
  })

  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);

我添加了这一部分：

$('#follower').on('mousedown', function(){
    // Hide the #follower element
    $(this).hide(); 

    // Set the hover event on anchor tags so this immediately gets called if we're over an anchor tag
    $('a').on('mouseover', function(){
      $(this).click(); // Click the anchor tag
      $('#follower').show(); // Show the #follower element again
    })
});

// Unbind the anchor tag mouseover event so we don't click anchor tags by moving the mouse quickly
$(document).on('mouseover', function() {      
    $('a').unbind('mouseover').show();
})

Answer 5

那是因为Link低于圈子。所以你实际上是在点击圆圈。将css z-index添加到链接之下，或者您想要修复，但问题在于z-index。

http://codepen.io/anon/pen/PmpQzg

#follower {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
}

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

5 个答案:

JS