如何将事件传递到隐藏的< browser>？ [英] How can I pass events on to a hidden <browser>?

问题描述

我正在使用XULRunner 1.9.2编写一个关于浏览器的简单视图。

I've working on a simple view around a browser using 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> drawWindow ，然后做一些魔术。一切都很好。 （好吧，滚动条和游标有点不稳定，但我可以忽略它们。）

I've written some Javascript that handles MozAfterPaint events from the <browser>, pushes them to the <canvas> with drawWindow, and then does some magic. It all works fairly nicely. (Well, scrollbars and cursors are kinda wonky, but I can ignore those.)

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

I really want the canvas to be the only visible element, but I can only interact with the browser element right now.

我获得了部分成功：

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

• Capture events on the <canvas> and re-inject them into the <browser>.

我可以使用 clientX 和 clientY 每个事件到画布，在浏览器中查找相应的 document.elementFromPoint（x，y）， createEvent initEvent dispatchEvent 相应。

I can use the clientX and clientY of each event to the canvas, look up the corresponding document.elementFromPoint(x, y) in the browser, and createEvent initEvent dispatchEvent appropriately.

然而，这仅适用适用于键（向下/按下/向上），单击和鼠标（向下/移动/向上）。我没有看到如何合理地合成鼠标（over / out）事件，而 DOMMouseScroll 在这里不会触发所以我无法捕捉滚轮事件。

However, this only works well for key(down/press/up), click, and mouse(down/move/up). I don't see how to reasonably synthesize mouse(over/out) events, and DOMMouseScroll doesn't fire here so I can't capture scroll wheel events.

我没有取得任何成功：

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

• Stacking the canvas above the browser.

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

这需要某种方式允许事件通过画布传递到浏览器上，这是我的避风港还没试过，因为有一个更直接的问题：

This requires some way of allowing events to pass through the canvas and onto the browser instead, which I haven't really tried yet, because there's a more immediate problem:

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

Even though the canvas should be stacked above the browser, the browser is visible above the canvas.

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

Stack the browser above the canvas while making it transparent.

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

理论上，我不应该以这种方式搞乱事件。但是，不透明度设置似乎没有任何好处，同样，浏览器仍会遮挡画布。

In theory, I shouldn't have to mess with events at all this way. However, the opacity setting doesn't seem to do any good, and again, the browser still occludes the canvas.

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

How do I hide the browser yet still allow normal interaction with it?

（我不喜欢编写本机代码，WebKit的答案也很好。但据我所知，Gecko和WebKit都没有屏幕外渲染API，并且没有WebKit等价于 MozAfterPaint 和 drawWindow 。）

(I'm not adverse to writing native code, and WebKit answers are fine too. But as far as I can tell, neither Gecko nor WebKit have off-screen rendering APIs, and there's no WebKit equivalents to MozAfterPaint and drawWindow.)

推荐答案

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

As I recall you can do this by using mousethrough="always" attribute but I'm not sure that you can set it directly on the <canvas> element itself, so you may need to wrap it inside some sort of box. Otherwise as you're using XULRunner 1.9.2 I believe the pointer-events: none; CSS property can be used instead.

这篇关于如何将事件传递到隐藏的< browser>？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！