-1

我正在使用 XULRunner 1.9.2 围绕浏览器制作一个简单的视图。

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<window
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml">
  <hbox equalsize="always" flex="2">
    <browser flex="1" type="content-primary"/>
    <html:canvas flex="1"/>
  </hbox>
</window>

我编写了一些 Javascript 来处理MozAfterPaint来自 的事件<browser>，将它们推送到<canvas>with drawWindow，然后做一些魔术。这一切都很好。（好吧，滚动条和光标有点不靠谱，但我可以忽略这些。）

我真的希望画布成为唯一可见的元素，但我现在只能与浏览器元素交互。

我在以下方面取得了部分成功：

  • 在 上捕获事件<canvas>并将它们重新注入到<browser>.

    我可以将每个事件的clientXand用于画布，在浏览器中clientY查找相应的，并适当地查找。document.elementFromPoint(x, y)createEvent initEvent dispatchEvent

    但是，这只适用于key(down/press/up)、click和mouse(down/move/up)。我看不到如何合理地合成mouse(over/out)事件，DOMMouseScroll也没有在这里触发，所以我无法捕获滚轮事件。

我没有成功：

  • 将画布堆叠在浏览器上方。

    <stack flex="2">
  <browser flex="1" type="content-primary"/>
  <html:canvas flex="1"/>
</stack>

    这需要某种方式来允许事件通过画布并进入浏览器，我还没有真正尝试过，因为有一个更直接的问题：

    即使画布应该堆叠在浏览器上方，浏览器在画布上方也是可见的。

  • 将浏览器堆叠在画布上方，同时使其透明。

    <stack flex="2">
  <html:canvas flex="1"/>
  <browser flex="1" type="content-primary" style="opacity: 0;"/>
</stack>

    从理论上讲，我根本不应该以这种方式搞乱事件。但是，该opacity设置似乎没有任何好处，而且浏览器仍然会遮挡画布。

如何隐藏浏览器但仍允许正常交互？

（我并不反对编写本机代码，WebKit 的答案也很好。但据我所知，Gecko 和 WebKit 都没有离屏渲染 API，也没有与 和 的 WebKit 等价物MozAfterPaint。drawWindow）

4

1 回答 1

0

我记得你可以通过使用mousethrough="always"属性来做到这一点，但我不确定你是否可以直接在<canvas>元素本身上设置它，所以你可能需要将它包装在某种盒子里。否则，当您使用 XULRunner 1.9.2 时，我相信指针事件：无；可以改用 CSS 属性。

于 2011-02-22T22:07:44.233 回答