jQuery點擊元素后的偽

試圖檢測是否點擊了偽元素，這之前已經問過但不是我的設定。我的包裝器中有其他元素也有標準點擊事件，所以我不能使用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$0" 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$1" 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$2" 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$3" 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$4" 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。

我覺得這已經很接近了，如果有人能提出建議，我將不勝感激。不幸的是，我無法更改大部分標記。

uj5u.com熱心網友回復：

您的問題是您正在使用e.target嵌套label和checkbox.

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

using$("span").click...將接收子元素的事件，e.target作為被點擊的元素，但this作為事件分配給的元素。

由于偽“元素”span在寬度計算的末尾，input并且label不正確。

改變

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

到

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

將使用spans 寬度進行檢查。

標籤：javascript 查询 伪元素

上一篇：jQuery查找每個專案

下一篇：如何在Jquery中獲取yii2單擊的radioList值？