Question

我正在使用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的{{1}}个事件，然后将它们推送到<browser> <canvas>，然后做一些魔术。一切都很好。（好吧，滚动条和游标有点不稳定，但我可以忽略它们。）

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

我取得了部分成功：

在drawWindow上捕获事件并将其重新注入<canvas>。

我可以将每个事件的<browser>和clientX用于画布，在浏览器中查找相应的clientY，document.elementFromPoint(x, y) createEvent { {1}}恰当。

但是，这仅适用于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>设置似乎没有任何好处，浏览器仍然会遮挡画布。

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

（我不喜欢编写本机代码，而且WebKit的答案也很好。但据我所知，Gecko和WebKit都没有屏幕外渲染API，而且{{1}没有WebKit等价物。 }和<stack flex="2"> <html:canvas flex="1"/> <browser flex="1" type="content-primary" style="opacity: 0;"/> </stack>。）

Answer 1

我记得你可以使用mousethrough="always"属性来做到这一点，但我不确定你是否可以直接在<canvas>元素本身上设置它，所以你可能需要将它包装在某种类型中的盒子。否则，当您使用XULRunner 1.9.2时，我相信可以使用pointer-events: none; CSS属性。

如何将事件传递给隐藏的<browser>？</browser>

1 个答案: