CSS 指针事件=“无”和/或 XUL mousethrough=“始终”在 Firefox 网页中
最近我问了这个问题关于如何传递点击<通过元素(例如全屏覆盖)。收到了一些好的建议,但我仍然想知道哪些浏览器本身支持此功能...
对于那些跳过上一个链接的人,覆盖层纯粹是装饰性的,必须被覆盖并且应该忽略点击(所有鼠标事件都应该通过)直接通过它)...
到目前为止,我只设法在 WebKit 浏览器中使用它。
适用(Chrome 和 Safari 4):-pointer-events: none;">
已知 Firefox 支持 SVG 的指针事件(以及 3.6 中的其他 HTML 元素);问题是,我似乎无法让它与 SVG 一起使用(例如 xlink:href="overlay.24bit.8alpha.png"
)。
我希望的另一种方式这可以通过使用 XUL in HTML。
我希望在叠加层上使用属性 mousethrough="always"
( 等)。尚未工作...
奇怪的是,Internet Explorer 将 alpha 不透明度 PNG 透明区域视为“点击通过”,这很方便。
在 Firefox (3+) 中实现此目的的任何其他好(或简单但黑客)方法。考虑使用 wmode="transparent"
覆盖 Flash(失败)。
Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...
For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...
So far, I've only managed to get this working with WebKit browsers.
Works (Chrome and 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 is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png"
).
Another way I hoped this could be achieved was by using XUL in HTML.
I'm hoping to use the attribute mousethrough="always"
on the overlay (<image>
, etc). Not working as of yet...
Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.
Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent"
(fail).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试这个 jQuery 解决方案:http://jsbin.com/uhuto
适用于 Firefox、Chrome、iPad 的 Safari 和 IE8至少。我看到的唯一问题是 IE 中的覆盖层不是半透明的,但我认为这是可以克服的。
另一个解决方案(由 Ext JS 插件使用): http://www.vinylfox .com/forwarding-mouse-events-through-layers/ - 使用 Javascript 重新转发事件。
Try this jQuery solution: http://jsbin.com/uhuto
Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.
Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.