Как определить, что мышь выходит из браузера при перетаскивании элемента с помощью Drag and Drop API? - PullRequest
Новая
       11

Как определить, что мышь выходит из браузера при перетаскивании элемента с помощью Drag and Drop API?

0 голосов
/ 10 июля 2020

Обратите внимание на следующий код: 

const dragSource = document.getElementById("dragSource");
const result = document.getElementById("result");
let count = 0;
document.onpointerleave = e => 
{
    result.innerHTML="count=" + count++;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label id="dragSource" style="background-color: aqua;" draggable="true">
      Drag me!
    </label>
    <div id="result"></div>
    <script src="index.js"></script>
  </body>
</html>

Как видите, если мышь выходит за пределы окна браузера, счетчик увеличивается. Проблема в том, когда вы перетаскиваете этикетку. В этом случае событие pointerleave не запускается, когда мышь выходит за пределы окна. Как мне определить, что мышь выходит за пределы окна в этом случае?

Стоит упомянуть, что если вы перетащите метку из окна и отпустите ее (например, на рабочем столе), затем переместите мышь внутри окна браузера, pointerleave срабатывает !!! Как это происходит? !!

...