javascript - 如果父元素被禁用，则防止子元素上的点击事件

Question

我构建了一个相当复杂的 UI，我希望能够禁用其中的一部分，以便除一个(重新启用按钮)之外的所有子元素都不可点击。

我正在向父级添加一个 disabled class 并在父级上设置一个监听器来检查点击，但是因为子元素事件没有被委托(delegate)，它们在父级的点击处理程序之前触发，所以我无法停止冒泡。

根据我的理解，使用捕获阶段并不是一个真正的选择，那么还有另一种方法吗？

我宁愿不在顶部添加新的 HTML 元素(叠加层)，因为我需要能够单击父元素中的按钮以移除禁用状态。

我是否应该重写所有子元素点击处理程序以改为使用委托(delegate)，以便只有父级监听点击事件？

[更新更多解释和示例代码]我有一个动态加载的面板，它在我网站的每个部分都不同。一旦载入，特定于页面的脚本就会运行，以将事件连接到面板中的各种元素。这包括链接和表单，以及可编辑的元素(它们只是 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") 等，并且确实需要可点击的一项是底部的删除按钮(这是一个 anchor 标记。)请记住，此 HTML 在不同页面上可能不同。如果我要委托(delegate) anchor 的点击，我没有问题，但它确实是一个问题，因为它不能使用委托(delegate)事件设置。我已经尝试将监听器添加为 $("#infoPanel *").click( ... ) 并停止传播，默认行为并返回 false，但是项目的事件处理程序首先运行，所以那行不通。通常，如果没有那个按钮，我会在整个事情上覆盖一层，然后就此结束。

Answer 1

在子元素的处理程序中执行此操作:

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

或者，如果您所说的“ parent ”指的是更远的祖先，请执行以下操作:

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

如果您仍想允许事件冒泡，请从 return 语句中删除 false。

---

如评论中所述，使用 .closest() 而不是 .parents() 可能会得到更好的结果，因为它可以在第一个 .disabled 发现祖先。