Браузер не реагирует на dispatchEvent - PullRequest
Новая
       51

Браузер не реагирует на dispatchEvent

0 голосов
/ 02 мая 2019

Я занимаюсь разработкой веб-приложения, в котором у меня есть pdfjs, работающие в iframe, чтобы у моих пользователей были открыты многостраничные PDF.В родительском окне пользователь может наложить PDF-файл с аннотациями.Таким образом, родительское окно захватывает мышь, и я хотел бы отправить события мыши в iframes, используя postMessage.Моя проблема в том, что когда я отправляю, например, событие колеса мыши в pdf с помощью postMessage, а затем использую dispatchEvent для воссоздания события в iframe, файл не прокручивается.

Я не думаю, что в моей проблеме что-то естьс помощью pdfjs я создал небольшой пример: 

textE = document.getElementById('text');
textE.addEventListener('mousedown', textF);
textE.addEventListener('mousemove', textF);
textE.addEventListener('mouseup', textF);
textE.addEventListener('mouseover', textF);
textE.addEventListener('scroll', textF);
overlayE = document.getElementById('overlay');
overlayE.addEventListener('mousedown', overlayF);
overlayE.addEventListener('mousemove', overlayF);
overlayE.addEventListener('mouseup',   overlayF);
overlayE.addEventListener('mouseover', overlayF);
overlayE.addEventListener('scroll',    overlayF);

function textF(event) {
  if (event.type !== 'mousemove')
    console.log('text event', event.type, event);
}
function overlayF(event) {
  if (event.type !== 'mousemove')
    console.log('external event', event.type);
  overlayE = document.getElementById('overlay');
  textE.dispatchEvent(new MouseEvent(event.type, event));
}
<div style="position:absolute; width:80%; height:100px;">
    <div id="text" style="position:absolute; width:100%; height:100%; overflow-y:scroll;">

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
    </div>
</div>

<div id="overlay" style="position:absolute; top:0; left:50%; width:30%; height:100%; background:rgba(255,128,128,0.5);">
</div>

Здесь у меня есть div с некоторым текстом, и я покрываю часть с другим div.Затем я использую dispatchEvent для отправки события мыши на текстовый слой.Так, например, попробуйте выделить какой-нибудь текст, начинающийся с белого фона, затем текст можно будет выделить (наберитесь терпения, фрагмент кода по какой-то причине работает медленно).Если вы попробуете тот же самый щелчок первым в тексте, покрытом прочитанным, текст не будет выделен, хотя обработчик событий фактически получает событие.

Я не понимаю этого, может кто-нибудь помочь?

1 Ответ

0 голосов
/ 02 мая 2019

Как уже упоминалось в комментариях, это не событие, а многоуровневое. Оверлей - это только то, что расположено над div с текстом, и поэтому, если вы попытаетесь выбрать что-либо в оверлее, вы будете ограничены тем, что находится в оверлее.

Просто сделайте оверлей и подложку, добавив z-index:-1; к его CSS, и тогда вы сможете выделить текст в основном div. 

textE = document.getElementById('text');
textE.addEventListener('mousedown', textF);
textE.addEventListener('mousemove', textF);
textE.addEventListener('mouseup', textF);
textE.addEventListener('mouseover', textF);
textE.addEventListener('scroll', textF);
overlayE = document.getElementById('underlay');
overlayE.addEventListener('mousedown', overlayF);
overlayE.addEventListener('mousemove', overlayF);
overlayE.addEventListener('mouseup',   overlayF);
overlayE.addEventListener('mouseover', overlayF);
overlayE.addEventListener('scroll',    overlayF);

function textF(event) {
  if (event.type !== 'mousemove')
    console.log('text event', event.type);
}
function overlayF(event) {
  if (event.type !== 'mousemove')
    console.log('external event', event.type);
  overlayE = document.getElementById('underlay');
  textE.dispatchEvent(new MouseEvent(event.type, event));
}
<div style="position:absolute; width:80%; height:100px;">
    <div id="text" style="position:absolute; width:100%; height:100%; overflow-y:scroll;">

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
    </div>
</div>

<div id="underlay" style="position:absolute; z-index:-1; top:0; left:50%; width:30%; height:100%; background:rgba(255,128,128,0.5);">
</div>
...