單擊錨元素的某個子元素時，請勿重定向

Question

現在，我的HTML結構如下：

<a class="gallery-item" href="#">
    <div class="top">
        <div class="title"></div>
    </div>


    <div class="bottom">
        <div class="tags">
            <span class="weight"></span><br>
            <span><input type="checkbox" id="read" name="read" value="0"></span>
            <span class="date"></span>
        </div>
    </div>
</a>

我的問題是當前復選框不會更改，而是將我重定向到href。

我四處搜索，發現一些可能可以正常工作的代碼，但是，所有這些代碼都阻止了復選框的選中或取消選中。

我嘗試使用jQuery來實現此功能，但是仍然無法產生結果。

我正在使用的當前代碼，在這種情況下，item是父元素。

$(item).click(function(e) {
    var sender = $(e.target);

    if (sender.prop("id") == "read") {
       var checked = $("#read", item).prop("checked");

       if (checked == true) {
           $("#read", item).prop("checked", false);
       } else {
           $("#read", item).prop("checked", true);
       }

       return false;
    }

    return true;
});

我也需要一種方法來觸發復選框的.change() 。

任何幫助或建議，我們將不勝感激。

Answer 1

您可以在單擊input時使用stopPropagation()方法，以防止事件冒泡DOM並被a上的事件處理程序捕獲，如下所示：

$(item).find('input').on('click', function(e) {
    e.stopPropagation();
});

工作實例

還要注意，單擊處理程序中的邏輯比需要的要復雜得多，因為它只是切換子input 。 嘗試這個：

$('a').click(function(e) {
    $(this).find('input').prop('checked', function(i, p) {
        return !p;
    });
});

$('input').click(function(e) {
    e.stopPropagation();
});

工作實例

您可以修改上面的選擇器以符合您的特定要求。

Answer 2

現在，我的HTML結構如下：[…]

您的問題是您正在創建無效的HTML-在這種情況下，無論如何您都無法預期可預測的行為。

a元素的內容模型是

透明的，但必須沒有交互式內容后代。

一個input元件，如果不是的類型hidden ， 是交互式內容-並且因此不允許作為一個的后代a元件。

因此，您在這里要做的第一件事就是修復錯誤的HTML代碼。