最近项目中遇到点击一个图标执行某些操作的功能,本来很简单就能实现,但图标却是::after
伪元素实现的,在印象中好像不能直接对伪元素进行dom
操作,可项目中有所有页面都是通过伪元素来展示图标的,将所有页面中图标改成DOM
元素也不太可行。
在网上查了下,大部分都是介绍通过event
对象获取鼠标指针坐标的方式判断点击的区域是否为伪元素所在的区域,但这很烦麻烦。
下面整理出几种简便方式实现 click
伪元素时进行事件处理,附上例子代码。
HTML结构
首先 HTML 结构是这样的
<section>
<span>按钮文字</span>
</section>
实现方法
第一种
通过CSS3
的pointer-events
特性来实现。
CSS 代码
<style>
*{margin: 0; padding:0;}
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; /* 关键点在这里,元素禁止响应鼠标事件 */
}
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; /* 关键点在这里,伪元素覆盖父元素的 pointer-events: none ,响应鼠标事件 */
}
section span{
display: inline-block;
height: 100%;
vertical-align: top;
line-height: 40px;
padding-left: 10px;
}
</style>
JavaScript 代码
<script>
document.querySelector('section').addEventListener('click', ()=>{
console.log('只有点击伪元素才能触发click');
});
</script>
第二种
通过阻止事件冒泡的方式实现
CSS基础代码同上,将 pointer-events: none;
和 pointer-events: auto;
。
<script>
document.querySelector('section').addEventListener('click', ()=>{
// 因为其他子元素事件冒泡被阻止了,所以点击section的时候,只剩下伪元素覆盖区域进入到事件监听中
console.log('只有伪元素才能触发click');
});
document.querySelector('span').addEventListener('click', ev=>{
// 阻止文字元素的事件冒泡
ev.stopPropagation();
});
</script>
第三种
通过 event
对象的指针坐标来判断点击的是否在伪元素范围内,这种方式网上很多,大家去度娘一下就有了。
最后
最后就是,实在不行就不要使用 ::after
了,换成实际 dom
节点吧,啊O(∩_∩)O哈哈~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。