basic usage
pointer-events
Property specifies under what conditions (if any) a particular graphical element can become a mouse event.
- In actual application, the disabled effect of elements can be realized dynamically by controlling
auto
and none
dynamically.
Attributes |
describe |
auto |
It has the same effect as when the pointer-events attribute is not specified. For SVG content, this value has the same effect as visiblePainted |
none |
Elements are never targeted by mouse events, including move-in, move-out, click events, etc. |
- Example: Clicking on Baidu will not redirect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一颗不甘坠落的流星</title>
<style>
a[href="https://www.baidu.com/"]
{
pointer-events: none;
}
</style>
<body>
<a href="https://blog.csdn.net/qq_45677671?spm=1011.2444.3001.5343">CSDN</a>
<a href="https://www.baidu.com/">百度</a>
</body>
<script type="text/javascript"></script>
</html>
- Specific attributes for svg tags