Here are a few simple ways to implement click pseudo elements for event handling, with example code attached.
HTML structure
First of all, HTML structure is like this
<section> <span>Button text</span> </section>
Implementation method
The first
adopt
CSS3's
Point events feature.
CSS code
<style> * section{ border: 1px solid #abc; border-radius: 5px; background-color: #def; font-family: Microsoft YaHei; height: 40px; box-sizing: border-box; cursor: pointer; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; /* The key here is that the element does not respond to mouse events */ } section::after{ content: ''; border-left: 1px solid #abc; display: inline-block; width: 24px; height: 100%; background-size: contain; background-position: center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABEklEQVRoQ+2X3Q3CMAyE3Y3YBDZAbOBRzAaMwkiMgCqlUoX4SX13qiKcl77Uzn13ddpONviaBtdvBbB3gpVAJQA6UI8QaCBcXgnAFoINKgHQQLhcmoC738zsHhHzVbJkAE38uam+qCAkAC/iF+clEHSAD+JlEFSAH+IlEDSATvF0CArARvFUCBggKZ4GAQG4+8HMTuABHxHxyPaAALKbMusKgOlmptd/J9CG+JhxblVz3XWIhz5GFxeTEJSPO9oMbISgiJ8NpAHMzTohaOLpAB0QVPESgC8QdPEygDcQEvFSgBXEmD/14Mutu5x6CnXvSryxAIhmplpVAinbiEWVANHMVKtKIGUbsagSIJqZajV8Ak/MSlox+m54VQAAAABJRU5ErkJggg==); pointer-events: auto; /* The key here is that the pseudo element overrides the pointer events of the parent element: none, in response to mouse events */ } section span{ display: inline-block; height: 100%; vertical-align: top; line-height: 40px; padding-left: 10px; } </style>
JavaScript code
<script> document.querySelector('section').addEventListener('click', ()=>{ console.log('Only click pseudo element can trigger click'); }); </script> web Front end development learning Q-q-u-n: 784783012 ，Share learning methods and small details that need attention, and keep updating the latest tutorials and learning methods (From zero foundation to front-end project practice course, learning tools, career planning)
Second kinds
By preventing the event from bubbling
The basic code of CSS is the same as the above, and the points events: none; and points events: Auto; are added.
<script> document.querySelector('section').addEventListener('click', ()=>{ // Because other sub element event bubbles are blocked, when clicking section, only the pseudo element coverage area is left to enter event monitoring console.log('Only pseudo elements can trigger click'); }); document.querySelector('span').addEventListener('click', ev=>{ // Prevent text elements from bubbling ev.stopPropagation(); }); </script>
Third kinds
adopt
The pointer coordinates of event object are used to judge whether the click is in the range of pseudo elements. There are many ways on the Internet. You can go to Du Niang and have them.
last
Finally, if you can't do it, don't use:: after. Change to the actual dom node