防止父元素被禁用的子元素的点击事件

我已经构建了一个相当复杂的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

防止父元素被禁用的子元素的点击事件

回答

相关问题