Moment For Technology

How to add mouse events to tag pseudo-elements after and before

Posted on Aug. 8, 2022, 6:45 p.m. by 鄧美琪
Category: The front end Tag: css

Met a little problem today, in a word, I'll hide and ellipsis beyond the parent box section, and then added a parent box: : after pseudo elements to show a small icon to click the small icon to trigger events open to show all words pop-up window, suddenly found that I don't know how to add event to pseudo element, Through access to information to achieve, record and share with you.

Let's start with the two renderings I want

Clicking on this button will bring up the details, but clicking on the entire DIV box will have no event callbacks


digression

First, those of you who are familiar with CSS will be familiar with the ::after and ::before pseudo-elements, which are children of an element and inline inline elements. Add ::before and ::after to a tag and check with your browser.

They can behave like real elements, with borders, content, colors, backgrounds, and even images, but fake elements have one big advantage: they don't exist in real HTML structure. This means that you can't get the pseudo-element in JS, or add, delete, or change a pseudo-element

But here's where pseudo-elements come in: you can use them to create visual effects without burdening THE JS DOM, and they're transparent to JS. So even if you add a lot of fake elements to the page, it doesn't affect the efficiency of looking up the DOM.

Also, since it's not an actual HTML tag, it speeds up the browser's ability to load HTML files, which is helpful for optimizing SEO.


Get to the point

Since we can't get the pseudo-element using JS manipulation of the DOM, what if I want to add an event to the pseudo-element, as I did in my case?

Of course, the smart guys will find another way: can't we just use a real tag instead of a fake element?

Yes, straightforward, perfect solution to my problem, however, 99 and 100, although only one point apart, but a lot of rankings

Wouldn't it be even better if I could take advantage of the pseudo-elements and add events?

Talk is cheap, show me the code!

html:

div @click="btnClick()"This is a real HTML tag/div
Copy the code

CSS:

div {
    pointer-events: none; /* Closes the element mouse event */
}
div::after {
    content:'This is a fake element that I added to the tag. Notice that the content of the fake element should not be omitted, otherwise the fake element will be invalid.';
    pointer-events: auto; /* Mouse events for pseudo-elements */
}
Copy the code

js:

btnClick() {
    console.log('Added successfully ~');
}
Copy the code

Here we use a less-used style:

  • pointer-events.

So what is this thing? Here's a quote from MDN:

  • The pointer-events CSS attribute specifies under what circumstances, if any, can a particular graphic element be the target of mouse events
  • Details - Portal

In plain English, the element is allowed or not to be mouse operated.

In our case, what did it do? Let's break it down step by step:

  • First, we add the tag stylepointer-events: none;In which case the tag will never be the target of the mouse event, so we click on this anywaydivTag, will not trigger the tag bindingbtnClick()The callback function
  • Then we give the label::afterPseudo elements (::beforeAdd a sentence to the stylepointer-events: auto;, which is equivalent to turning on the mouse event for the pseudo element. When we click the pseudo element, the mouse event can be triggered.

Here's another problem:

  • The pseudo-element does not exist in HTML, we can not use JS methods to manipulate the pseudo-element, how to add mouse events to this pseudo-element?

Keys:

Here comes a very important point: event capture and bubbling. I will not elaborate on the specific events bubbling and capturing knowledge here. The lions who are not aware of the fierce can look up the relevant content. Their detailed explanation must be more profound than mine.

Just know that when we set pointer-events: None to the div tag; It will never be the target of the mouse event, but the mouse event can point to the descendant element when its pointer-events attribute specifies other values, in which case the mouse event will fire the parent element's event listener during the capture or bubble phase.

And there is no doubt that the pseudo element is the label element's child elements, so when we give this tag binding events and callback functions, closed its mouse events, open the mouse events to pseudo elements at the same time, the binding event is pointing to the pseudo elements, capture or bubbling phase in events at the same time, it triggers the binding event callback function ~

Tips: However, there is an obvious drawback to this method, which is that it cannot distinguish after from before or other pseudo-elements, because it uses event capture and bubble mechanism to trigger the parent element's binding event and callback function, that is, when we open the mouse event on multiple pseudo-elements, Whichever pseudo-element triggers the mouse event is caught by the parent element's listener and triggers the callback, making the distinction impossible.

But anyway, it's recommended to use a lot of pseudo-elements. What? Why, you ask? Improve performance bai, optimize SEO bai ~

OK, the above is the core content of this article, if there is any place to write inappropriate, welcome to correct ~

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.