【发布时间】：2009-11-17 03:33:03
【问题描述】：
最近我向this question 询问了如何通过一个元素（例如全屏覆盖）传递点击。收到了一些很好的建议，但我仍然想知道哪些浏览器原生支持这个......
对于那些跳过上一个链接的人，叠加层纯粹是装饰性的，必须被叠加并且应该忽略点击（所有鼠标事件都应该通过它）...
到目前为止，我只设法让它与 WebKit 浏览器一起工作。
作品（Chrome 和 Safari 4）：-<image src='./images/75/75.overlay.blood.png' width='100%' height='100%'
style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />
众所周知，Firefox 支持带有 SVG（以及 other HTML elements in 3.6）的指针事件；问题是，我似乎无法让它与 SVG 一起使用（例如 xlink:href="overlay.24bit.8alpha.png"）。
我希望实现此目的的另一种方法是使用XUL in HTML。
我希望在叠加层上使用属性mousethrough="always"（<image> 等）。目前还没有工作...
奇怪的是，Internet Explorer 将 alpha opacity PNG 的透明区域视为“点击”，这很方便。
在 Firefox (3+) 中实现此目的的任何其他好的（或简单但 hackky）方法。用wmode="transparent" 思考了一个 Flash 覆盖（失败）。
【问题讨论】：
-
关于 Firefox，似乎 SVG 蒙版效果可以完成这项工作（演示：-weblogs.mozillazine.org/roc/archives/2008/06/… 中的 people.mozilla.org/~roc/mask.xhtml），页面服务（好吧，命名）为 .xhtml。我可以使用 PNG 作为遮罩（我会反转我的叠加层）吗？
-
在即将发布的 FF 3.6 中也支持它：developer.mozilla.org/en/CSS/pointer-events
-
感谢 lithorus。 SVG 路线似乎是我拥有的最好/唯一的选择。有什么想法吗？
-
取决于您的目标受众，否则 SVG 方式似乎是唯一的选择。
-
对此是否有更明确的（跨浏览器）答案？
标签： javascript html firefox xul