点击带有Alpha通道的div

Question

我正在尝试在feed小部件的底部复制twitter的"淡出"图层(在twitter.com的主页上).

我想出的唯一没有使用html5的方法就是在feed div上面放置一个绝对定位的div,并给它一个alpha通道的png,上面有一个白色到透明的渐变.这很容易实现.

现在唯一的问题是透明层下面出现的div不可点击.有关如何使div可点击的任何想法？也许你有另一种方法可以完全复制这种效果？

谢谢!

Answer 1

本文介绍了一种捕获onclick事件的方法,并通过暂时隐藏叠加层,重新点击,然后再次取消隐藏来处理它.隐藏对最终用户不应该是可见的.

通过图层转发鼠标事件:

1. 位于网格上的textarea(我的屏蔽元素)接收鼠标悬停,鼠标移动,mousedown,mouseup和其他事件.
2. 顶部遮罩层隐藏片刻,因此我们可以找出事件位置处遮罩下方的元素.
3. 该事件被重新启动 - 这是W3 DOM事件模型和更简单的Microsoft等价物发挥作用的地方.
4. 再次启动该过程 - 为下一个事件做好准备.

编辑:我认为Twitter的功能实际上要简单得多.有一个从SVG借来的CSS属性已经实现了一堆浏览器.

.overlay { pointer-events: none; }

目前Firefox 3.6 +,Safari 4和谷歌浏览器都支持这一功能 - 所以如果你很高兴它只能在这些浏览器上运行,那么这是一个更简单的选项,其附加优势在于它也适用于悬停事件,而不是只需点击活动.