OnClick получить второй элемент вместо первого - PullRequest
Новая
       5

OnClick получить второй элемент вместо первого

0 голосов
/ 14 ноября 2018

Я создал div, который следует за мышью. Теперь всякий раз, когда я нажимаю e.target, равен этому div # moveItem.

Я не могу использовать пользовательский курсор, потому что ширина будет более 128 пикселей.

Есть ли способ обойти этот 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>

1 Ответ

0 голосов
/ 14 ноября 2018

Вы ищете 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...