如何将事件绑定到 epub.js 中的演绎版答案

【问题标题】：How to bind events to the rendition in epub.js如何将事件绑定到 epub.js 中的演绎版
【发布时间】：2019-04-20 21:16:11
【问题描述】：

我想在epub.js 的页面上注册一个右键监听器，但不知道怎么做。还有 passEvents 再现对象的方法，但也找不到任何帮助。这是我最后一次尝试：

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

【问题讨论】：

渲染rendition时是否要传递事件？

标签： javascript epub.js

【解决方案1】：

根据您提出的问题，我希望我没看错，您希望在本书本身举办 contextmenu 活动，对吧？

如果是这样的话我用了下面的JS：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：