如果父元素被禁用，則防止子元素上的點擊事件

Question

我構建了一個相當復雜的 UI，我希望能夠禁用它的一部分，以便所有子元素，除了一個（重新啟用按鈕）不可點擊。

我正在向父class添加一個禁用的class並在父class上設置了一個偵聽器來檢查點擊，但是由於子元素事件沒有被委托，它們在父級的點擊處理程序執行之前觸發，所以我無法停止冒泡。

根據我的理解，使用捕獲階段並不是一個真正的選擇，那么還有另一種方法嗎？

我不想在頂部添加一個新的 HTML 元素（覆蓋），因為我需要能夠單擊父級內的按鈕來刪除禁用狀態。

我是否應該重寫所有子元素點擊處理程序以使用委托，所以只有父元素在監聽點擊事件？

[更新更多解釋和示例代碼] 我有一個動態加載的面板，它在我網站的每個部分都不同。 加載后，將運行特定於頁面的腳本以將事件連接到面板中的各種元素。 這包括鏈接和表單，以及 jeditable 元素（它們只是 DOM 中的常規跨度。）示例 HTML：

<div class="infoPanelContent" id="detailSection">
<h1><span>
    Details 
    <a class="sprite-icons flag" title="Flag" data-recordid="123123" href="/tickets/flag">Flag</a>
</span></h1>
<ul class="flexCol">
    <li>
        <h3>Status:</h3>
        <span id="setStatus">
            <span data-recordid="123123" data-projectid="104824" id="status" class="editWithSelect" title="Click to edit...">Open</span>
            <input type="text" class="hidden" maxlength="50" placeholder="New Status">
        </span>
    </li>
</ul>

<!-- Responsiblity -->
<h1><span>
    Responsibility</span>
    <a data-orientation="left" title="Add people" href="/tickets/responsible?r=123123" class="toggleAddNew sprite-buttons iconAdd">Add people</a>
</h1>
<ul class="singleCol">
    <li>
        <p>Mel L.</p>
        <a class="sprite-buttons iconRemove" data-itemid="432432" data-recordid="123123" data-projectid="104824" href="/tickets/delete-responsible">Delete</a>
    </li>
</ul>
<h1>
<span>Attachments</span>
<a data-orientation="left" title="Add attachments" href="/tickets/attachments?r=123123" class="toggleAddNew sprite-buttons iconAdd">Add attachments</a>
</h1>
<ul class="singleCol attachments">
    <li>
        <p><a target="_blank" href="http://www.test.com"><span class="sprite-icons iconFiletypeIMG"></span><em>Sample (60 KB)</em></a></p>
    </li>
</ul>

<p class="centerButton"><a data-delete="Delete Ticket" data-restore="Restore Ticket" class="sprite-buttons btnBlueLight" title="" data-recordid="123123" data-projectid="104824" href="/tickets/delete" id="deleteTicket"><strong class="sprite-buttons">Restore Ticket</strong></a></p>

具有$(".toggleAddNew")功能的示例元素是$(".flag") 、 $("#status") 、 $(".toggleAddNew")等，需要點擊的一項是底部的刪除按鈕（這是一個錨標記。）請記住，此 HTML 在不同的頁面上可能會有所不同。 如果我要委派錨點的點擊，我不會有問題，但它確實是一個問題，因為無法使用委派事件來設置可編輯的東西。 我已經嘗試將偵聽器添加為$("#infoPanel *").click( ... )並停止傳播、默認行為並返回 false，但項目的事件處理程序首先運行，所以這不起作用。 通常情況下，如果不是那個按鈕，我只會在整個事情上疊加一層並稱之為一天。

Answer 1

在子元素的處理程序中執行此操作：

if ($(this).parent().is(".disabled")) {
    return false;
}

或者，如果“父母”是指更遠的祖先，請執行以下操作：

// In the child element's handler...
if ($(this).parents(".disabled").length) {
    return false;
}

如果您仍希望事件冒泡，請從return語句中刪除false 。

---

如評論中所述，使用.closest()而不是.parents()可能會得到稍微好一點的結果，因為一旦找到第一個.disabled祖先，它就可以停止測試。

Answer 2

不完全確定你想在這里做什么，但據我所知，你想讓父元素的所有后代都不可點擊，除了子元素之一。

假設您計划在父元素上保持類“禁用”：

$('.disabled').find(':not(.enable_button)').on('click', function() {
    return false;
});

這也假設您可以在要單擊的子元素上放置一個類“enable_button”。 如果你不想使用一個類，我相信有一些方法可以識別它。

當用戶單擊重新啟用按鈕時，只需刪除此處理程序。

Answer 3

我使用 jEditable 的.editable('disabled')方法的組合解決了這個問題，然后直接在禁用面板（不包括恢復按鈕）內的a和button元素上添加了一個處理程序，並確保我自己綁定的元素使用委托，因此我可以控制的任何事件都會注冊到面板。 這使我可以將禁用/啟用設置為全局，只需為每個部分編寫更清晰的代碼。