css pointer

2021-01-20 14:18 jianzhan
是不是以前有过这样的亲身经历:把1个元素置于另外一个元素之上,而期待下面的那个元素变成可点一下的?如今,运用css的pointer-events特性便可保证。
CSS pointer-events
Pointer-events本来来源于于SVG,现阶段在许多访问器中早已获得反映。但是,要让任何HTML元素起效还得依靠于1点点css。该特性称之为pointer-events,基础上能够将它设定为auto,这是一切正常的个人行为,而“none”是1个趣味的特性。
将它运用到1个元素
假如你早已设定1个元素的css特性为pointer-events: none。它将不容易捕捉任何click恶性事件,而是让恶性事件穿过该元素抵达下面的元素,就像这样:

拷贝编码
编码以下:

<style>
.overlay {
pointer-events: none;
}
</style>
<div id="overlay" class="overlay"></div>

访问器适用
到现阶段为止,Firefox 3.6+、Safari 4 和Google Chrome适用Pointer-events。我感觉Opera和IE毫无疑问会尽快遇上,我不知道道它们的方案中是不是适用它。
小演试
我将Pointer-events个人行为的演试放在1起,在那里你能够自身检测它。正如你看到的那样,右侧灰色的盒子阻拦点击下面的连接。可是,假如你点击checkbox对其禁用Pointer-events。下面连接的click恶性事件将被开启。
演试页详细的编码以下所示:

拷贝编码
编码以下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf⑻">
<title>CSS pointer events</title>
<style>
.container {
position: relative;
width: 370px;
font: 15px Verdana, sans-serif;
margin: 10px auto;
}
.overlay {
position: absolute;
right: 0px;
top: 0;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
.pointer-events-none {
pointer-events: none;
}
</style>
<script>
window.onload = function () {
document.getElementById("enable-disable-pointer-events").onclick = function () {
document.getElementById("overlay").className = "overlay " + ((this.checked)? "pointer-events-none" : "");
};
};
</script>
</head>
<body>
<div class="container">
<a href="http://baidu.com">百度搜索</a>, <a href="http://google.com">google</a>, <a href="http://jb51.net">脚本制作之家</a>,<a href="http://baidu.com">百度搜索</a>, <a href="http://google.com">google</a>, <a href="http://jb51.net">脚本制作之家</a>,<a href="http://baidu.com">百度搜索</a>, <a href="http://google.com">google</a>, <a href="http://jb51.net">脚本制作之家</a>,<a href="http://baidu.com">百度搜索</a>, <a href="http://google.com">google</a>, <a href="http://jb51.net">脚本制作之家</a>,
<div id="overlay" class="overlay"></div>
<p>
<input id="enable-disable-pointer-events" type="checkbox">
<label for="enable-disable-pointer-events">Disable pointer events for grey box</label>
</p>
</div>
</body>
</html>

具体的事例
假如你进到Twitter(中国仿佛不可以登陆到该网站,以下图所示)的刚开始页,并且沒有登陆。在底部你将看到许多列出的标识。在右侧的1个元素,有1张退色的照片遮盖其上造成这样的实际效果。悲剧的是下面的连接没法点一下。假如你在css中加上1行编码,便可以了。
如今,假如你必须这类实际效果,你有了1个十分简易的方式。