如何设置 Canvas 背景以允许在底层 iframe 中点击？

Question

我搜索了很多主题，教如何使用 CSS canvas.style.pointerEvents 属性防止整个 Canvas 元素接收鼠标点击。但我只想阻止 Canvas background 接收鼠标点击。

我正在使用 Animate CC 和 CreateJS 创建一个应用程序，我需要一个页面来加载 iframe 元素内的其他几个页面。一切都很好，我可以加载页面，背景是透明的。

但是我尝试过的任何操作都不允许我点击 iframe 内的页面，因为我正在覆盖的 Canvas 不允许我点击其背景。

这是我的代码：

this.createIFrame = function(page)
{   
    var iFrame = document.createElement("iframe");
    iFrame.id = "if";
    iFrame.setAttribute("src", page);
    iFrame.style.position = "absolute";
    iFrame.style.top = "0";
    iFrame.style.left = "0";    
    iFrame.style.width = "100%";
    iFrame.style.height = "100%";
    iFrame.style.border = "0";
    iFrame.style.scrolling = "no";
    iFrame.style.zIndex = "0";
    document.body.appendChild(iFrame);
    canvas.style.pointerEvents = "visible"; // I tried all possible values
    canvas.style.zIndex = "1";
}

this.createIFrame("page0.html");

任何帮助将不胜感激！

谢谢。

Answer 1

不幸的是，canvas 元素必须接收鼠标事件来处理 EaselJS 舞台上的不透明/交互式内容，因此单击“透明”区域对于浏览器而言与舞台内容没有任何不同。

同时处理画布内容和底层 iframe 中的内容的唯一方法是手动将事件传递到 iframe。不幸的是，这并不简单 - 但您可以考虑手动生成鼠标事件。如果您的 iframe 不在同一个域中，您的选择将受到限制。在使用postMessage API 在帧之间安全发送消息之前，我已经这样做了，但是您必须在双方都实现 API。

祝你好运！