给伪元素(::before / ::after) 绑定点击事件

项目场景：

给重构稿上的伪元素绑定一个点击事件。

---

问题描述：

伪元素没有 dom 结构，所以无法直接绑定事件。

---

解决方案：

可以利用事件捕获，把事件处理程序绑定到父元素上，再用css禁掉父元素的点击事件 (点击父元素无法再触发点击事件)，同时开启子元素的点击事件。

js代码：

// 在父元素上添加点击事件
    $('.panel').on('click', function (e) {
        queryUserAward(e)
    });

css代码：

/* 父元素 */
.panel {
	width: 6.02rem;
    height: 8.94rem;
    /* 禁用点击事件 */
    pointer-events: none;
}

/* 子元素 */
.panel .panel-btn{
	width: 6.02rem;
    height: 8.94rem;
    /* 打开子元素的点击事件 */
    pointer-events: auto;
}

.panel::after{
	content: '';
    z-index: 2;
    width: 2.01rem;
    height: 2.16rem;
    background: url(../ossweb-img/z.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1.87rem;
    left: 50%;
    margin-left: -1rem;
    /* 打开子元素的点击事件 */
    pointer-events: auto;
}

最终效果：
点击中间的“转”字和底部抽奖按钮都可以进行抽奖：

---