如何将事件绑定到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');
  })
});

当我右击这本书时，这段代码只返回hey。但是，如您所见，有两个参数(cfiRange, contents)，它包含您所需的内容。

无论如何，我创建了一个小提琴。

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

Answer 2

下面的答案适用于我在一个项目中使用的"epubjs": "^0.3.88，在该项目中，我希望完全禁用每个设备上的用户右键单击或用户长时间按压。

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

之后，将一个contextmenu事件附加到iframe。此回调将返回一个事件MouseEvent，您可以用event.preventDefault();取消该事件。然后，您可以访问event属性来呈现用户右键单击的位置中的任何内容。为此，您可以使用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的人都有帮助。