Those of you in the front end have probably heard of this attribute. Every Christmas, many web sites feature a special effect of falling snow to add some festive cheer. Some are implemented in Flash, and some are implemented in HTML+ JS. I was curious how a layer could be added to the top of the z-axis without affecting any of the event responses of the elements below. It’s cutting-edge technology. We only use one CSS property pointer-Events to do everything.

It looks really amazing, I thought it would be some kind of obscure concept like event bubbling proxy forwarding. Div {pointer-events: None} on an element such as div makes the HTML element (and all of its descendants) lose all event responses. The mouse focus ignores it, and all events like Click and mouseover pass through it to the next element. This attribute seems to be very useful and keeps me wondering how I can make some practical sense in the project. Until these two days, I did a data visualization project and finally found a place to use it.



As shown in the figure, there are two layers on the z-axis of the page. The bottom layer is a full-screen large map based on Baidu Map and Echarts, and the upper layer is also a full-screen container, which uses Vue+webSocket to make real-time table charts and information to display text and header parts. It looks perfect. Running test, damn, maps can’t be zooming and moving with the wheel, Echart components can’t click and interact. The container layer blocks the map so that you can use pointer-events: None. Use a pointer-events:auto event for the table. If you click on a row, you can use a pointer- Events: Auto event for the table.

This is the best use I’ve seen of this property so far, and it’s the pages that have a lot of interaction levels for special effects classes, but if you think big enough and use it to dynamically bind some elements, it feels like you can play some dark magic. If you don’t know this property, I haven’t thought of any other solution to solve this problem for the time being. Please talk about your ideas.

Also, because it is a CSS3 property, IE is not supported until 9!




Ps: Early to bed and early to rise, often do exercise, make more friends with the opposite sex ~