Question

我正在开发一个Webapp，其中在iframe中运行pdfjs，以便我的用户可以打开多个PDF。在父窗口中，用户可以用注释覆盖pdf。因此，父窗口捕获了鼠标，我想使用postMessage将鼠标事件发送到iframe。我的问题是，当我使用postMessage将鼠标滚轮事件发送到pdf，然后使用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将鼠标事件发送到文本层。因此，例如，尝试选择以白色背景文本开头的一些文本，然后可以选择该文本（请耐心等待，由于某些原因，代码段运行缓慢）。如果您先尝试在单击“已读”的文本中单击相同的按钮，则不会选择文本，尽管事件侦听器实际上会接收到该事件。

我不明白，有人可以帮忙吗？

Answer 1

如评论中所述，这不是事件，而是分层的东西。重叠式广告就是这样，它位于带有文字的div上方，因此，如果您尝试在重叠式广告中选择任何内容，则将仅限于重叠式广告中的内容。

只需在CSS上添加z-index:-1;即可进行叠加和参考，然后您就可以在主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>

浏览器未对dispatchEvent

1 个答案: