Question

我想在epub.js的页面上注册一个右键单击侦听器，但不知道该怎么做。也有passEvents种移交对象的方法，但都找不到任何帮助。这是我的最后尝试：

rendition.on("rendered", () => {
    const contents = rendition.getContents()
    contents.document.addEventListener('contextmenu', showContextMenu, false);
});

Answer 1

根据您的要求，我希望我做对了，您想在本书本身上进行一次contextmenu事件，对吗？

在这种情况下，我使用了以下JS：

rendition.on("rendered", (e,i) => {;
  i.document.documentElement.addEventListener('contextmenu', (cfiRange, contents) => {
      console.log('hey');
  })
});

当我右键单击本书的时，此代码仅返回hey。但是如您所见，有两个参数(cfiRange, contents)包含您所需要的。

无论如何，我创建了一个fiddle.

另一种解决方案是使用document作为接收事件的元素，但是在我的测试中，它可以获取本书中的所有内容。

Answer 2

以下答案适用于我在一个项目中使用的 PS C:\Temp> $latest.Name Prison_Mike_autobiography.txt PS C:\Temp> $latest.DirectoryName C:\Temp PS C:\Temp> $latest.FullName C:\Temp\Prison_Mike_autobiography.txt PS C:\Temp> $latest.CreationTime Friday, May 7, 2021 5:51:19 PM PS C:\Temp> $latest.Mode -a----，我想在每个设备上完全禁用用户右键单击或用户长按。

渲染渲染时，我们得到两个参数，其中一个是 "epubjs": "^0.3.88。如果您检查您的阅读器，您会注意到您的 epub 文件正在 iframe 中呈现。这就是将事件侦听器添加到应用程序的主文档不起作用的原因。

在此之后，您将 iframe 事件附加到 iframe。此回调将返回一个事件 contextmenu，您可以使用 MouseEvent 取消该事件。然后您可以访问事件矩形属性以在用户右键单击的位置呈现任何内容。为此，您可以例如使用 event.preventDefault(); 和 event.clientX。

event.clientY

希望这对 2021 年使用 rendition.on('rendered', (rendition: Rendition, iframe: Window) => { helpers.log('Rendition rendered'); iframe.document.documentElement.addEventListener('contextmenu', (event: MouseEvent) => { helpers.log('Stopping contextual menu coming from epubjs iframe'); event.preventDefault(); }); }); 的任何人有所帮助。

如何将事件绑定到epub.js中的呈现

2 个答案: