如何在外部和跨源 iframe 中获取光标位置和光标事件？答案

【问题标题】：How is possible to get cursor position and cursor events outside and cross origin iframe?如何在外部和跨源 iframe 中获取光标位置和光标事件？
【发布时间】：2020-03-12 04:53:51
【问题描述】：

我正在开发视频播放器。该播放器在客户端页面的 iframe 中使用，因此它是跨域的。当用户单击搜索栏并将光标拖出 iframe 时，我无法识别 mouseup 事件，因此它保持选中状态。我注意到 youtube 播放器可以做到这一点，并且可以识别 iframe 之外的光标事件。我怎么能用javascript来做到这一点？

【问题讨论】：

我不确定您的问题是因为跨域 iframe。我刚刚做了一个小测试，我在 netlify 上托管了一个页面并将其嵌入到本地开发服务器上的 iframe 中，我能够单击，然后在按住鼠标按钮的同时将其移出框架，释放并采取行动那个 mouseup 事件。你能发布你的事件处理代码吗？
有一种方法可以解决这个问题，使用 document.parent 并在那里添加 eventListener，但它在跨域中不起作用。以下代码是如果 mousedown 在 iframe 内开始并且 mouseup 在 iframe 之外发生时不起作用的代码示例。 document.addEventListener('mouseup', (e) => { console.log(e); });

标签： javascript iframe cross-domain dom-events

【解决方案1】：

需要考虑的一点是，只有当指针直接位于带有 eventListener 的元素上方时才会触发 mouseup 事件。它不跟踪 mousedown 事件触发的元素，它只知道 mouseup 时鼠标的状态。

当一个按钮指向一个元素时，mouseup 事件会在一个元素上触发指针移动时释放设备（例如鼠标或触控板）位于里面。

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event

因此，如果您的用户在您的搜索栏播放头上启动了拖动，您需要一些其他的跟踪方法。

一种可能的解决方案是使用布尔变量。然后在 document 上监听 mouseup 并检查该变量的值。

let scrubbingTimeline = false;

document.querySelector('button').addEventListener('mousedown', ()=> {
    console.log('Mouse down')
    scrubbingTimeline = true
})
document.addEventListener('mouseup', ()=> {
    if(scrubbingTimeline === true) {
        console.log('Mouse has been released')
        scrubbingTimeline = false
    }
})

另一种可能的解决方案是仅在触发 mousedown 回调后才启动 mouseup 侦听器。然后在一个事件后停止收听。像这样：

function mouseUpHandler() {
    console.log("Mouse Lifted")
    document.removeEventListener('mouseup', mouseUpHandler)
}

document.querySelector('button').addEventListener('mousedown', ()=> {
    console.log('Down')
    document.addEventListener('mouseup', mouseUpHandler)
})

重要提示：此代码用于内部文档。 IE。将成为 iframe 的那个。

【讨论】：

提问者是创建文档的人，该文档将成为 iframe。它会正常工作，因为他可以控制这种情况下的内部文档。换句话说，他是第 3 方。
感谢您的回复。不幸的是，它不起作用。当光标离开 iframe 时，它会丢失所有鼠标事件，因此它会停止监听 mouseup 事件。
有趣。我运行的测试，不同服务器和域上的内部和外部文档在 Windows Edge、Chrome 和 Firefox 上对我有用。你能到这里看看当你在按钮上鼠标按下并在 iframe 之外的某个地方鼠标按下时控制台语句是否发生。 nervous-thompson-3a952a.netlify.com