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>

标签： javascriptjqueryhtmlcss

Answer 1

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

请参阅下面的工作示例：

$(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>