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

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

当我右键单击本书时，此代码只是 returns hey。但是正如您所看到的，有两个参数 (cfiRange, contents) 包含您需要的内容。

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

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

Answer 2

以下答案适用于 "epubjs": "^0.3.88，我在一个项目中使用它，我想在每个设备上完全禁用用户右键单击或用户长按。

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

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

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

希望这对在 2021 年与 epubjs 一起工作的任何人有所帮助。

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

How to bind events to the rendition in epub.js

javascript

epub.js