MouseEvent offsetX / Y, возвращающее значения для нежелательной цели eventListener - PullRequest
Новая
       52

MouseEvent offsetX / Y, возвращающее значения для нежелательной цели eventListener

0 голосов
/ 26 марта 2019

У меня есть вложенный макет, и сегодня я смог наконец выяснить, откуда исходит ошибка в моем коде.

Я воссоздал ошибку в упрощенном коде ручки, найденном здесь: https://codepen.io/marekKnows_com/pen/PLvqqd

При наведении курсора на область холста вы увидите розовый прямоугольник, изменяющий размеры таким образом, что один конец фиксируется в точке (400, 100), а другой конец прикрепляется к позиции курсора мыши.

Откройте консоль codepen и просмотрите выходные сообщения. Если вы переместите курсор в сторону от точки 400,100, в большинстве случаев все в порядке. Однако, если вы переместите курсор к точке 400,100, вы заметите, что цель MouseEvent иногда выбирает div выбора, который является корнем моей ошибки.

Вывод на консоль выглядит следующим образом при возникновении ошибки: 

"Offset(x,y): 94,149 targetId:canvas"
"Offset(x,y): 95,149 targetId:canvas"
"Offset(x,y): -1,77 targetId:selection"
"Offset(x,y): 97,149 targetId:canvas"

Как я могу предотвратить срабатывание слушателя перемещения мыши с неверной целью? Я только хочу, чтобы слушатель перемещения мыши сообщал мне позицию offsetX / Y относительно цели элемента canvas. 

const selectionEl = document.getElementById('selection');

const canvasEl = document.getElementById('canvas');
canvasEl.addEventListener('mousemove', (ev) => {
  const msg = 'Offset(x,y): ' + ev.offsetX + ',' + ev.offsetY + ' targetId:' + ev.target.id;
  const isBad = ev.target.id === 'selection';
  if (isBad) {
    console.error(msg);
  } else {
    console.log(msg);
  }

  const topLeftX = Math.min(400, ev.clientX);
  const topLeftY = Math.min(100, ev.clientY);

  const bottomRightX = Math.max(400, ev.clientX);
  const bottomRightY = Math.max(100, ev.clientY);

  selectionEl.style.left = topLeftX + 'px';
  selectionEl.style.top = topLeftY + 'px';
  selectionEl.style.width = (bottomRightX - topLeftX) + 'px';
  selectionEl.style.height = (bottomRightY - topLeftY) + 'px';
});
* {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#canvas {
  top: 10%;
  left: 20%;
  padding: 0px;
  width: 80%;
  height: 90%;
  border: 3px solid blue;
  position: absolute;
}

#selection {
  border: 1px solid red;
  background-color: pink;
  position: fixed;
}
<div id="canvas">
  <div id="selection"></div>
</div>
...