jQuery如何监听::after伪元素点击事件且不使用pointer-events:none

问题根因 #

你当前代码出现误触发的核心原因有两点：

• 判断顺序倒置：先执行伪元素点击的offset判断逻辑，再校验点击目标是否为input/label，点击内部元素时若offsetX超过该元素自身宽度，会先命中伪元素逻辑，后续校验不生效
• offset计算基准错误：点击span内部的input/label时，e.target 指向的是被点击的内部元素，不是绑定事件的外层span，用e.target的宽度做对比的结果完全不符合预期

修复方案 #

调整判断顺序，统一用外层span的尺寸做offset校验即可，修改后的JS代码如下：

const $wrapper = $('.wrapper');

attachInformationEvent = function() {
    const $elems = $wrapper.find('table td span');
    $elems.off().on('click', function(e) {
        e.stopPropagation();
        // 先判断是不是点击了内部的input/label，是就直接返回，不执行后续逻辑
        const targetTag = e.target.tagName.toUpperCase();
        if (targetTag === 'LABEL' || targetTag === 'INPUT') {
            return;
        }
        // 用当前绑定事件的span的宽度做判断，不是e.target的宽度
        const $currentSpan = $(this);
        const spanWidth = $currentSpan.width();
        // 可以额外加offsetY的范围校验，匹配你伪元素的top偏移，进一步提高准确率
        if (e.offsetX > spanWidth) {
            // 伪元素点击逻辑
            console.log('pseudo', $currentSpan.data('info'));
        } else {
            return false;
        }
    });
}();

如果需要进一步降低误触概率，还可以给伪元素的尺寸预留偏移量，比如把判断条件改成 e.offsetX > spanWidth + 5，适配不同浏览器的offset计算误差。

内容的提问来源于stack exchange，提问作者lharby