onClick 获取第二个元素而不是第一个

Question

我创建了跟随鼠标的 div。现在，每当我点击 e.target 就等于 div#moveItem.

我不能使用自定义光标，因为宽度将超过 128px。

有没有办法绕过这个 div 并让目标落后？

var item = document.querySelector("#moveItem");
var itemRect = item.getBoundingClientRect();

function followMouse(e) {
  var xPos = e.pageX - itemRect.width / 2;
  var yPos = e.pageY - itemRect.height / 2;

  item.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

function click(e) {
  console.log(e.target);
}

document.addEventListener("mousemove", followMouse, false);
document.addEventListener("mousedown", click, false);

body {
  min-width: 100%;
  min-height: 100%;
}

#moveItem {
  width: 75px;
  height: 75px;
  background-color: tomato;
  position: absolute;
  border-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Follow Mouse</title>
</head>

<body>
  <div id="moveItem"></div>
</body>

</html>

Answer 1

您正在寻找一个 pointer-events:none，因为 div 跟随您的鼠标将被忽略

var item = document.querySelector("#moveItem");
var itemRect = item.getBoundingClientRect();


function followMouse(e) {
  var xPos = e.pageX - itemRect.width / 2;
  var yPos = e.pageY - itemRect.height / 2;

  item.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

function click(e) {
  console.log(e.target);
}

    document.addEventListener("mousemove", followMouse, false);
    document.addEventListener("mousedown", click, false);

body {
  min-width: 100%;
  min-height: 100%;
}
#moveItem {
  width: 75px;
  height: 75px;
  background-color: tomato;
  position: absolute;
  border-radius: 50%;
  pointer-events:none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Follow Mouse</title>
</head>
<body>

  <div id="moveItem"></div>

</body>
</html>

onClick 获取第二个元素而不是第一个

onClick get second element instead of first

javascript

html

css

mouseevent