问题:
我们又是会用到在一个盒子上放一个蒙版使其有模糊效果的css样式,这个做固然有好处,但有一个很大的弊端,通常会使被覆盖的盒子中的点击事件失效。
解决:
对于这种问题需要用到一个CSS3的属性,可以通过给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了。
这其中有一个需要注意的地方,如果在绝对定位层上存在能够点击的元素,在添加" pointer-events:none; " 后将同样不起作用。
为了避免此情况,可以给需要操作的元素设置" pointer-events:auto" 即可。
属性:
pointer-events: auto | none | visiblePainted | visbleFill |
visibleStroke | visible | painted | fill | stroke | all | inherit
常用的只有 auto / none 两个属性值,其他的是针对 SVG 的。
auto:
效果和没有定义" pointer-events:none; " 属性相同,鼠标不会穿透当前层。在SVG中,该值和 visiblePainted 的效果相同。
none:
元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面层中的元素。但是如果它的子元素设置了" pointer-events" 的其他属性值,比如 auto,鼠标事件仍会监听这个子元素。