如何获得光标位置和光标事件，并使其越过原点iframe？

Question

我正在使用视频播放器。该播放器在客户端页面的iframe内使用，因此是跨源的。当用户单击搜寻栏并将光标拖出iframe时，我无法识别mouseup事件，因此它保持选中状态。我注意到youtube播放器可以做到，并且可以识别iframe之外的光标事件。我该如何使用JavaScript？

Answer 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)
})

重要：此代码用于内部文档。即将会be iframe的那个。