javascript 伪元素的点击事件

伪元素的点击事件

1.父元素 使用 ‘pointer-events: none;’ 伪元素使用‘pointer-events: auto;’

2.父元素绑定监听事件

$('.layui-picker-title').on('click', function (e) {
    $('.layui-picker-view').css({display:'none'});
    console.log('-父元素(伪元素点击事件)---单机删除');
});

样式

.layui-picker-title{
            text-align: center;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background: white;
            font-family: "iconfont" !important;
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            pointer-events: none;
            &:before{
                pointer-events: auto;
                position: absolute;
                top: 0;
                left: 15px;
                content: '\e93c';
                font-size: 18px;
                font-weight: 500;
                color: @theme-color;
            }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,024评论 1 45
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,408评论 19 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,684评论 1 92
  • # 移动端开发 ### 1. 1px问题如何解决 #### ①伪类 + transform(比较完美) > 原理是...
    sunnyRube阅读 4,381评论 0 0
  • 看到一些令人很受鼓励的文章,看了那些文章你是否瞬间变的信心满满,眼前的生活也变的顺畅无比,可是过不了几天,那个充...
    紫蔷薇花阅读 3,101评论 1 3