javascript - 'mouseenter' 和 'mouseleave' 事件一直以 div 作为光标触发

Question

我通过隐藏用户光标并在原始光标通常显示在屏幕上的位置显示一个 div 来制作“自定义光标”。

现在的问题是我想在将鼠标悬停在元素上时添加一些动画(例如缩放“光标”，或者在本例中作为光标的 div)。
在这个例子中，我做了一个按钮，并给它一个 'mouseenter' 和 'mouseleave' 事件。
当你用光标输入按钮时，我 console.log("enter");
当你离开按钮时，console.log("leave");

您可以很快看出问题所在:将鼠标悬停在按钮上时会多次触发这两个事件，而光标实际上并没有离开元素。
另请注意，当您非常缓慢地将鼠标悬停在左侧或顶部(直线)时，不会发生此问题，这可能是因为“left: e.pageX and top: e.pageY”脚本中的一段代码。

您可以做些什么来解决这个问题，以便正确触发这两个事件？

$(document).ready(function() {

  var cursor = $(".cursor");

  /* Cursor */
  $(document).on("mousemove", function(e) {
    cursor.css({
      left: e.pageX,
      /*Or clientX and clientY */
      top: e.pageY,
    });
  });

  /* Button */
  $(".btn").on("click", function(e) {
    e.preventDefault();
  });

  $(".btn").on("mouseenter", function() {
    console.log("entered");
  });

  $(".btn").on("mouseleave", function() {
    console.log("left");
  });
});

* {
  cursor: none;
}

.cursor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background-color: black;
}

.btn {
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  background-color: white;
  border: 4px solid black;
  padding: 0.5rem 0.8rem;
  display: inline-block;
  margin: 100px 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
  <a id="startChat" class="btn">Button</a>
</div>

<!--Cursor-->
<div class="cursor"></div>

Answer 1

将 pointer-events: none 添加到您的 .cursor 以使光标(黑点)永远不会成为任何鼠标事件的目标，因此它永远不会影响鼠标进入和鼠标离开事件。您可以阅读有关指针事件的更多信息 here

请参阅下面的工作示例:

$(document).ready(function() {

  var cursor = $(".cursor");

  /* Cursor */
  $(document).on("mousemove", function(e) {
    cursor.css({
      left: e.pageX,
      /*Or clientX and clientY */
      top: e.pageY,
    });
  });

  /* Button */
  $(".btn").on("click", function(e) {
    e.preventDefault();
  });

  $(".btn").on("mouseenter", function() {
    console.log("entered");
  });
  
  $(".btn").on("mouseleave", function() {
    console.log("left");
  });
});

* {
  cursor: none;
}

.cursor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background-color: black;
  pointer-events: none;
}

.btn {
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  background-color: white;
  border: 4px solid black;
  padding: 0.5rem 0.8rem;
  display: inline-block;
  margin: 100px 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
  <a id="startChat" class="btn">Button</a>
</div>

<!--Cursor-->
<div class="cursor"></div>