如何持续观察鼠标在iframe外的移动？

Question

我有一个页面，它有一个使用JavaScript鼠标事件实现的可拖动元素。如果我直接打开页面(而不是在iframe中)，当光标移出浏览器窗口时，元素会一直移动。但是如果我把页面放在iframe中，在Chrome和Safari中，当光标移到iframe之外时，JS不会发出mousemove事件(元素停止)(在Firefox中工作得很好)。

您可以在此demo中尝试它，方法是抓住元素并将其左右移动到demo上方：

​

function handleMouseDown(event) {
  event.preventDefault();
  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
}

function handleMouseMove(event) {
  handle.style.transform = `translateX(${event.clientX - 50}px)`;
}

function handleMouseUp() {
  window.removeEventListener('mousemove', handleMouseMove);
  window.removeEventListener('mouseup', handleMouseUp);
}

const handle = document.querySelector('#handle')
handle.addEventListener('mousedown', handleMouseDown);

#handle {
  display: inline-block;
  background-color: #eee;
  border: solid 1px #bbb;
  padding: 20px 15px;
  font-family: sans-serif;
}

<div id="handle">Drag me</div>

​

如何使浏览器在光标移出iframe时持续发出mousemove事件？

Answer 1

您需要从handleMouseDown中删除event.preventDefault()。元素不仅会在光标位于iframe之外时移动，甚至在浏览器窗口之外时也会移动。如果要阻止文本选择，可以使用user-select: none

​

function handleMouseDown(event) {
  // Delete: event.preventDefault();
  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
}

function handleMouseMove(event) {
  handle.style.transform = `translateX(${event.clientX - 50}px)`;
}

function handleMouseUp() {
  window.removeEventListener('mousemove', handleMouseMove);
  window.removeEventListener('mouseup', handleMouseUp);
}

const handle = document.querySelector('#handle')
handle.addEventListener('mousedown', handleMouseDown);

#handle {
  display: inline-block;
  background-color: #eee;
  border: solid 1px #bbb;
  padding: 20px 15px;
  font-family: sans-serif;

  /* Add */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div id="handle">Drag me</div>

​

此外，如果您取消mousedown事件，pointermove事件也不会在iframe外部触发。