pointer-eventsbasic information
pointer-eventsAttributes are used to control whether an element can respond to mouse operations. Commonly used keywords include autoandnone
pointer-events: none; // 让一个元素忽略鼠标操作
pointer-events: auto; // 还原浏览器设定的默认行为
normative definition
| entry | state |
|---|---|
| initial value | auto |
| Available values | Applies to all elements: auto/none, only applies to SVG: bounding-box/visiblePainted/visibleFill/visibleStroke/visible/painted/fill/stroke/all |
| inheritable | Yes |
| animation type | Discrete animation (no interpolation frames between key frames, no transition animation) |
compatibility
pointer-events: noneEffect: Ignore mouse operations
Setting an element pointer-events: noneallows the browser to ignore the existence of this element when processing mouse operations and directly "penetrate" to the element behind the click area.
This means that when you perform mouse operations directly on this element
- Mouse effects on this element will not be processed, such as hover effects
- Mouse events on this element will not be responded to, such as click, mousein, and mousedown events.
What is "penetration"
Let’s illustrate with examples.
pointer-eventsis an inheritable attribute. According to CSS cascading and inheritance rules, the child element pointer-eventswill inherit the parent value if it is not set.
As in the following example, the self element is set pointer-events: none, and the child element inherits it pointer-eventsas well none.
At this time, when you click the child area, the browser will ignore the existence of child and self. The click operation will penetrate to the bottom parent element, trigger the click event on the parent, and print out the parent click.
If you move the child so that it does not overlap the parent area, clicking on the child will not penetrate the parent element, and the click event on the parent will not be triggered.
This is the "penetration" effect on the click area.
If the child is set to at this time pointer-events: autoto restore the response to mouse operations, click the child to trigger the click event on the child, and then the event bubbles up to trigger three-level printing.
Visible pointer-eventsonly indicates whether an element responds to mouse operations directly acting on it, and will not interfere with the event bubbling capture process.
In addition, inheritability also means that if bodyset on pointer-events: none, it will affect bodyall elements below .
Application scenarios
pointer-events: noneBrings two features:
- Disable mouse operations directly on the element
- "Penetrate" to the lower level
Flexible use of these two features can easily achieve some effects
Penetrating obstructions
For example, in this example given by Tailwind CSS, I hope that the input box can be focused when clicking the search icon. Just set the icon element pointer-events: noneto penetrate.
<div class="relative"><div class="absolute pointer-events-none"><svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg></div><input type="text" placeholder="Search" class="...">
</div>
Prevent continuous operation
For example, after clicking the submit button, set the button pointer-events: noneto prevent continuous submission.
Furthermore, you can even combine it :activewith animation to achieve the throttle effect. Are you still using JS for throttling? CSS can also prevent repeated clicks on buttons - Nuggets (juejin.cn) , a very interesting way to play, you can read more.
Simulate disabled effect
For example, set a tag pointer-events: noneto prevent the default behavior. But be careful. Not responding to mouse operations does not mean preventing event response. The event bubbling capture mechanism has nothing to do with pointer-events. Setting on a child element pointer-events: autocan still trigger events bound to the parent element and continue to bubble upward.
in conclusion
pointer-eventsUsed to control whether the element responds to mouse operations.
When set pointer-events: none, the element will remove the default mouse effects (such as hover), and the element itself cannot trigger mouse events. The browser will ignore the existence of this element and hand over the operation to the corresponding element below the click area, resulting in a "penetration" effect.
pointer-eventsIt is an inherited property and pointer-eventshas nothing to do with the event bubbling capture mechanism.
pointer-eventsWhat are the application scenarios?
1. Penetrate obstructions
2. Prevent continuous operations
3. Simulate disabled effects
at last
I compiled a set of "Interview Guide for Front-End Major Companies", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm. There are 201 interview questions in total, and I have made an answer for each question. Answer and analysis.
Friends in need can click on the card at the end of the article to receive this document and share it free of charge
Part of the document display:
The length of the article is limited, so the following content will not be shown one by one.
Friends in need can click on the card below to get it for free