防止父元素被禁用的子元素的點擊事件

我已經構建了一個相當複雜的UI，並且我希望能夠禁用它的一部分，以便除了一個（重新啓用按鈕）之外的所有子元素都是不可點擊。防止父元素被禁用的子元素的點擊事件

我加入一個禁用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>

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

來源

2012-11-16 ken.dunnington

如果您爲您的問題添加實際示例，獲得正確答案的時間和機率會呈指數增長。無論如何，如果你想要禁用的元素都是輸入（和按鈕/ textarea/select）元素，我會將他們的'disabled'屬性設置爲true。 –

的子元素的處理程序操作：

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祖先發現它可以阻止它的測試。

來源

2012-11-16 18:31:10

正如Atif評論（並刪除？）最接近（）可能會提供更好的性能時，有一個殘疾的祖先。 –

@AtifMohammedAmeenuddin：的確，我們只需要測試第一個。 –

不完全確定你想在這裏做什麼，但據我所知，你想讓所有父元素的後代不可點擊，除了其中一個子元素。

假設你打算維持類「已禁用」你的父元素：

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

這還假定你可以把一個類「enable_button」你想點擊的子元素。如果你不想使用一個類，我相信有一些方法可以識別它。

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

來源

2012-11-16 18:40:59 sgroves

這是我第一次嘗試，不幸的是有處理程序直接附加到不容易重寫的子元素（即從一個插件，而不是我自己的代碼），所以到這個委託事件被處理時，子事件已經發生在。 –

由於某些原因，jQuery的'$ .unbind（）'不適用於這些元素嗎？如果沒有，你可以用'$ .clone（）'（*沒有*事件處理程序）克隆每個子元素，然後用克隆替換它們。 – sgroves

我解決了這個使用jEditable的.editable('disabled')相結合的方法，然後直接在禁用面板內的a和button元素添加處理程序（不包括恢復按鈕）。這並確保我綁定的元素自己使用委託，所以我控制的任何事件都被註冊到面板上。這使我可以使禁用/啓用全局，並只爲每個部分編寫更乾淨的代碼。

來源

2012-11-20 23:43:51

防止父元素被禁用的子元素的點擊事件

回答

相關問題