Как можно получить позицию курсора и события курсора снаружи и пересечь исходный фрейм? - PullRequest
Новая
       28

Как можно получить позицию курсора и события курсора снаружи и пересечь исходный фрейм?

0 голосов
/ 11 марта 2020

Я работаю над видеоплеером. Этот проигрыватель используется внутри iframe на странице клиента, поэтому он перекрестного происхождения. Когда пользователь нажимает на панель поиска и перетаскивает курсор из iframe, я не могу определить событие mouseup, поэтому оно остается выделенным. Я заметил, что игрок YouTube может сделать это и может идентифицировать события курсора вне iframe. Как я могу сделать это, используя javascript?

1 Ответ

0 голосов
/ 11 марта 2020

Следует учитывать, что событие mouseup срабатывает, только если указатель находится непосредственно над элементом с помощью eventListener. Он не отслеживает, по какому элементу сработало событие mousedown, он знает только о состоянии мыши во время наведения мыши.

Событие mouseup вызывается для элемента, когда кнопка указательного устройства (например, мыши или трекпада) отпускается, когда указатель находится внутри него.

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

Поэтому вам нужен какой-то другой метод отслеживания, если ваш пользователь инициировал перетаскивание по указателю воспроизведения на вашей панели поиска.

Возможным решением является использование логической переменной. Затем прослушайте mouseup на document и проверьте значение этой переменной. 

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

Другое возможное решение - запустить слушатель mouseup только после срабатывания обратного вызова mousedown. Затем прекратить прослушивание после одного события. Например: 

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

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

Внимание! Этот код предназначен для внутреннего документа. То есть тот, который будет iframe.

...