关于透明div的事件扑获问题

最新推荐文章于 2025-08-09 16:38:22 发布

原创最新推荐文章于 2025-08-09 16:38:22 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #filter #internet #文档 #工作 #css

本文探讨了在IE浏览器中，当两个Div层叠加且上方层为透明背景时，下方内容区域导致上层Div无法捕获事件的问题。通过设置CSS alpha滤镜或使用1x1像素透明GIF作为背景两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天对mapeasy增加了一层绘图层，前面工作一切顺利，到了最后发现当两层DIv叠加的时候，如果上层是透明的背景色，并且下层中含有内容（图片，文本。。）时在内容出现的地方，上层的DiV无法扑捉到任何事件。后来查资料得知原来是IE故意这样做的，目的为了实现某些特殊的事件模型,官方相关文档如下：
http://support.microsoft.com/kb/262559/zh-cn
按其说法有两种解决方法：
In certain cases, you may want to have a transparent DIV element receive events. You can do this in two different ways under Internet Explorer 5.5:

•	Use the CSS alpha filter to set the background color of the DIV to white and set the opacity to 0 (zero) as follows: <DIV STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=0);"> This results in a fully transparent DIV that includes the content.
•	Specify a 1-by-1 pixel transparent Graphics Interchange Format (GIF) background as follows: <DIV STYLE="BACKGROUND: url(trans.gif) repeat;">