css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
Posted 海风~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件相关的知识，希望对你有一定的参考价值。
引用：http://www.css88.com/book/css/properties/user-interface/pointer-events.htm
语法：
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值：auto
适用于：所有元素
继承性：有
动画性：否
计算值：指定值
取值：
- auto：
- 与pointer-events属性未指定时的表现效果相同。在svg内容上与
visiblepainted值相同 - none：
- 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
- 其他值只能应用在SVG上。
说明：
设置或检索在何时成为属性事件的target。
- 使用
pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。 - 对应的脚本特性为pointerEvents。
实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
position: absolute;
top: 0;
left: 0;
}
.front{
background-color: #c9e2b3;
z-index: 10;
width: 100px;
height: 100px;
pointer-events: none;
}
.back{
background-color: #f99f9f;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<a class="front" onclick="alert(\'front!\');"></a>
<a class="back" onclick="alert(\'back!\')"></a>
</body>
</html>
以上是关于css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件的主要内容，如果未能解决你的问题，请参考以下文章