CSS中的pointer-events屬性實現點穿效果
阿新 • • 發佈:2018-12-16
CSS的pointer-events屬性
auto:與 pointer-events 屬性未指定時的表現效果相同。
none:該元素永遠不會成為滑鼠事件的 target。但是,當其後代元素的 pointer-events 屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情況下,滑鼠事件將在捕獲或冒泡階觸發父元素的事件偵聽器。
程式碼例項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test css pointer-events</title >
<style>
body{
background: #eeeeee;
}
main{
width: 880px;
height: 500px;
margin: 100px auto;
position: relative;
background: #FFFFFF;
display: table;
}
.top{
width : 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
display: table-cell;
vertical-align: center;
color: #FFFFFF;
line-height: 100px;
background: purple ;
pointer-events: none;
cursor: pointer;
}
.under{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
text-align:center;
line-height: 100px;
color: #FFFFFF;
border-radius:50%;
background: orangered;
cursor: zoom-in;
}
</style>
</head>
<body>
<main>
<div class="under">
Under U
</div>
<div class="top">
I am top div
</div>
</main>
</body>
<script type="text/javascript">
let main = document.querySelector("main");
let log = function (content) {
let p = document.createElement("p");
p.innerHTML = content;
main.appendChild(p);
};
let t =document.querySelector(".top");
t.addEventListener("click",function () {
log("clicked the top!")
},true);//捕獲階段
let under =document.querySelector(".under");
under.addEventListener("click",function () {
log("clicked the under!!!")
},true)//捕獲階段
</script>
</html>
執行結果
在具有層級關係的結構中,使用了pointer-events:none
屬性將會使當前元素中的事件不會被捕獲,從而實現了點穿的效果。而當代碼示例中假如top元素具有子元素且顯示指定pointer-events
屬性不為none
的時候,top元素註冊的事件將會被捕獲/冒泡
觸發