How to use CSS attributes to block mouse events (mouse clicks can penetrate upper elements)

Origin: A few days ago, a tester sent a requirement, which required to see a picture:

When I saw this requirement, I was a little confused. The current situation is that the drop-down date menu will be displayed in response to the click event only when the blank area of ​​the date content box is clicked.

I have absolutely positioned this icon in the date content box. Its layer dimension is higher than the date content box, so it will not respond to click events when you click on it. My first reaction was event click penetration, but how to achieve it? I feel like I have touched upon a blind spot in knowledge that I have been ignoring.

I was so confused that I operated like a tiger and started programming for Google...

Facts have proved that it is important to surf the Internet scientifically. Google is more accurate than Baidu. I am complaining about Baidu’s ads again…

In order to ensure that the content box area covered by the icon can also respond to click events, you can use poniter-events css property to achieve this.

There are many values ​​for poniter-events attribute, but most of them are related to svg and can be skipped directly. There are two common attribute values: none | auto .

auto : This behaves the same as if pointer-events attribute were not specified. none : The element will never be target of mouse events. However, mouse events can be directed to descendant elements when pointer-events property of the descendant element specifies another value, in which case the mouse events will trigger event listeners on the parent element at the capture or bubbling stage.

Let's take a look at the compatibility of poniter-events :

Desktop browser

IE : 11+ (IE6~IE10 are not supported) Firefox : 3.6+ Chrome : 4.0+ Safari : 6.0 Opera : 15.0

Mobile device browsers

iOS Safari : 6.0 Android Browser : 2.1+ Android Chrome : 18.0+

Seeing this, you can basically solve the problem I encountered this time:

After solving the problem, a new question arises. In addition to allowing mouse clicks to penetrate the outer mask, are there any other common application scenarios poniter-events ?

Considering the effect of none value, it should be possible to cancel the click behavior of the event. For example: make the a-label link unclickable, avoid multiple clicks on a button, repeated form submission, etc. In addition, there are certainly many other applications that can be discovered through attribute values.

Summarize

This is the end of this article about using CSS attributes to block mouse events (mouse clicks can penetrate upper elements). For more relevant CSS attributes to block mouse events, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!