Detailed explanation of the use of CSS pointer-events attribute

In front-end development, we are in direct contact with users, and we should try our best to make users feel that the operation is smooth and pleasant, and to get a native-like feeling. Animation is the most commonly used method.

The requirement here is the design of the pop-up layer. This pop-up layer should appear like the pop-up layer on native, appear when the button is clicked, and close when the mask or button is clicked, and have animation effects (fade, slide, etc.) when it appears and closes.

question

When closing the pop-up layer, taking the fadeOut animation effect as an example, I use the process of opacity from 1 -> 0 to simulate the gradual disappearance animation process. Container is the outermost container of the pop-up layer component:

.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: .5s fadeOut forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

The problem is that opacity of 0 only makes the elements inside the container transparent and invisible, and the container still exists in the DOM node. When we bind the close event to the mask of the pop-up layer, since the z-index of the container is very large, the click event will be triggered on the mask.

transitionend and animationend events

In order to solve the above problems and provide a better user experience, we can hide the container node (display: none) after the animation effects are executed by listening to transitionend and animationend events. This way there will be no problem of mask intercepting click events.

Introduction

Using CSS technology to generate animation effects, we can capture the end events of animation or transformation in JS: transitionend and animationend events are standard browser events. The transitionend event is fired after a CSS transition ends.

The animationend event is fired when a CSS animation is completed (excluding situations where it is terminated before completion, such as the element becoming invisible or the animation being removed from the element).

Code example:

/*
 * Listen for the transitionend event on the container element * Then specify a function, such as showMessage()
 */
function showMessage() {
    console.log('Transition completed');
}
var element = document.getElementById("container");
element.addEventListener("transitionend", showMessage, false);

Browser compatibility

Taking the transitionend event as an example, the animationend event is similar.

It can be seen that the webkit prefix is ​​still needed in WebKit browsers, so we need to detect events separately according to various browsers.

shortcoming

My requirement is that this pop-up layer component may be called frequently, that is, after the user closes the pop-up layer, it will be opened again.

Using this solution, by listening to the animation end event, switching between display:none and display:block, but this will increase the browser rendering (redrawing and reflow) cost, and browser compatibility must be considered, and events need to be detected separately for various browsers.

pointer-events CSS property

Is there a more elegant and simpler solution? Now let's introduce our protagonist: pointer-events.

It should be noted that this pointer-events is different from Pointer Events (events and related interfaces for handling hardware pointer input from devices (including mouse, pen, touch screen, etc.)).

Introduction

The 'pointer-events' property specifies under what circumstances a given graphics element can be the target element for a pointer event. It affects the circumstances under which the following are processed:

• user interface events such as mouse clicks
• dynamic pseudo-classes (ie, :hover, :active and :focus; [CSS2], section 5.11)
• hyperlinks

In short, the pointer-events CSS property specifies under what circumstances (if any) a particular graphical element can become the target of a mouse event.

specification

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

It is primarily targeted at SVG, but has been extended to other HTML elements.

grammar

/* Keyword values ​​*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

For example, pointer-events: visibleFill;

This only applies to SVG. An element will only become the target of a mouse event if its visibility attribute is visible and the mouse pointer is inside the element. The fill attribute does not affect event handling.

Other attributes that are only applicable to SVG are not described here.

Here we are more concerned with the two attribute values ​​[auto|none]. These two attribute values ​​are also interesting when used on other HTML elements.

When the value is auto. This behaves the same as if the pointer-events attribute was not specified. For SVG content, this value has the same effect as visiblePainted.

When the value is none, the element will never be the target of mouse events. In other words, a value of none means that the mouse event "penetrates" the element and targets anything "below" the element.

Browser compatibility

It can be seen that pointer-events is compatible with most mobile browsers and has no prefix requirements.

Points to note

When the pointer-events value is none, it does not necessarily mean that the event listener of the element will never be triggered. If its child element has an explicit pointer-events attribute set and specifies that it can be the target of a mouse event, the triggering process will be transmitted to the parent element through event bubbling, and the event listening event of the parent element will be triggered.

Summarize

In the case where the pop-up layer component may be called frequently, use the pointer-events solution, that is, when the mask or button is closed when it is clicked, set the container animation effect and pointer-events: none, and when the pop-up layer appears, set pointer-events: auto. In this way, the problem can be solved by simply changing the css properties.

The above is the introduction to the use of CSS pointer-events attribute. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!