jQuery 点击元素后的伪元素

Question

尝试检测是否单击了伪元素，之前有人问过这个问题，但与我的设置不太相符。我的包装器中还有其他元素，它们也有标准的点击事件，所以我不能使用 pointer-events: none

这是我的 js 函数：

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

attachInformationEvent = function() {
    const $elems = $wrapper.find('table td span');
    $elems.off().on('click', function(e) {
        e.stopPropagation();
        if (e.offsetX > $(e.target).width()) {
            // if the click is offset more than the element width then this should be the psuedo after element
            // fire our function here
            console.log('pseudo');
        } else if (event.target.tagName === 'LABEL' || event.target.tagName === 'INPUT'){
            // allow normal checkbox click event
            // this event is firing the pseudo event above
            return;
        } else {
            return false;
        }
    });
}();

这是标记：

<table id="gridzone_0_Rep_Content_ctl00_1_cbList_1" class="checkbox-group default footable-loaded">
    <tbody>
        <tr>
            <td>
                <span data-info="Excellence Description">
                    <input id="gridzone_0_Rep_Content_ctl00_1_cbList_1_0_1" type="checkbox" name="gridzone_0$Rep_Content$ctl01$ctl00$cbList[=12=]" value="Excellence">
                    <label for="gridzone_0_Rep_Content_ctl00_1_cbList_1_0_1">Excellence</label>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span data-info="Innovation Description">
                    <input id="gridzone_0_Rep_Content_ctl00_1_cbList_1_1_1" type="checkbox" name="gridzone_0$Rep_Content$ctl01$ctl00$cbList" value="Innovation">
                    <label for="gridzone_0_Rep_Content_ctl00_1_cbList_1_1_1">Innovation</label>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span data-info="Care Description">
                    <input id="gridzone_0_Rep_Content_ctl00_1_cbList_1_2_1" type="checkbox" name="gridzone_0$Rep_Content$ctl01$ctl00$cbList" value="Care">
                    <label for="gridzone_0_Rep_Content_ctl00_1_cbList_1_2_1">Care</label>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span data-info="Heritage Description">
                    <input id="gridzone_0_Rep_Content_ctl00_1_cbList_1_3_1" type="checkbox" name="gridzone_0$Rep_Content$ctl01$ctl00$cbList" value="Heritage">
                    <label for="gridzone_0_Rep_Content_ctl00_1_cbList_1_3_1">Heritage</label>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span data-info="Passion Description">
                    <input id="gridzone_0_Rep_Content_ctl00_1_cbList_1_4_1" type="checkbox" name="gridzone_0$Rep_Content$ctl01$ctl00$cbList" value="Passion">
                    <label for="gridzone_0_Rep_Content_ctl00_1_cbList_1_4_1">Passion</label>
                </span>
            </td>
        </tr>
    </tbody>
</table>

还有一些 css 在 span 之后显示一个小的伪元素：

.wrapper table td span::after {
    content: "?";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #000000;
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.077rem;
    font-weight: 800;
    height: 1.25rem;
    width: 1.25rem;
    left: 2.5rem;
    top: -1rem;
    padding: 2px;
}

我做了一个JSFIDDLE.

我觉得这很接近，如果有人能提供建议，我将不胜感激。不幸的是，我无法更改大部分标记。

Answer 1

您的问题是您将 e.target 与嵌套的 label 和 checkbox 一起使用。

<span>
    <input ...
    <label ...
</span>

使用 $("span").click... 将接收子元素的事件，e.target 作为被单击的元素，但 this 作为事件分配给的元素。

由于伪“元素”不在 span 的末尾，因此 input 和 label 的宽度计算不正确。

改变

if (e.offsetX > $(e.target).width()) {

到

if (e.offsetX > $(this).width()) {

将使用 spans 宽度进行检查。

jQuery 点击元素后的伪元素

jQuery click on psuedo after element

javascript

jquery

pseudo-element