[Switch] CSS3 super practical attribute: pointer-events

Recently I discovered a CSS property called pointer-events, which is a javascript-related property. Pointer-events is literally translated as pointer events . When the value is set to none, it has the following related characteristics.

Prevent the user's click action from having any effect
Prevent the display of the default mouse pointer
Prevents hover and active state changes in CSS from triggering events
Prevent events fired by JavaScript click actions

Isn't it amazing that a single piece of CSS can do a lot of things, we'll see how the compatibility goes.
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+

Take a look at the example, what's going on. html code:

<!DOCTYPE html>
<html>
<head> </head> <body> <ul> <li><a href="https://www.baidu.com/">百度</a></li> <li><a href="http://example.com">一个不能点击的链接</a></li> </ul> </body> </html>

css code:

<style>
  a[href="http://example.com"] { pointer-events: none; } </style>

Not only is the second a tag unclickable, it doesn't have the mouse hand style. Let's look at another example.

html code:

<!DOCTYPE html>
<html>
<head> </head> <body> <!-- 下方div --> <div class="bottom"> <a href="www.baidu.com">bottom-百度</a> </div> <!-- 上方div --> <div class="top"></div> </body> </html>

CSS code:

<style>
.bottom {
    background: yellow; width: 100px; height: 100px; } .top { width: 100px; height: 100px; position: absolute; top: 0; left: 0; } </style>

At this point, since the top div is above the a tag, the a tag cannot be clicked.

renderings

If we add a pointer-events attribute to the top layer above:

.top {
  pointer-events: none;
}

We can go through the top layer and click on the a label below. At this time, if the top layer has a color, it can be seen but not touched (can read but not say haha).

Why is this attribute very practical? During festivals on many websites, the top layer of the page will use canvas to draw rain and snowflakes to avoid these suspended objects blocking the page and affecting mouse clicks. You can use the pointer-events=none attribute to let These upper canvases do not block mouse events, allowing mouse events to penetrate the upper canvas to click on the page. How is it not very good, and quickly write a demo to try.

Author: Rin Yang
Link : https://www.jianshu.com/p/3eba945fc19e
Source: Jianshu The
copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.

[Switch] CSS3 super practical attribute: pointer-events

Guess you like