1

我已经构建了一个相当复杂的 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，但是项目的事件处理程序首先运行，所以这不起作用。通常情况下，如果不是为了那个按钮，我只会在整个事情上加一个覆盖层并收工。

4

3 回答 3

1

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

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

或者，如果“父母”是指更远的祖先，请执行以下操作：

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

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

如评论中所述，使用.closest()代替.parents()可能会产生更好的结果，因为一旦.disabled找到第一个祖先，它就可以停止测试。

于 2012-11-16T18:31:10.717 回答
1

不完全确定你想在这里做什么，但据我了解，你想让父元素的所有后代都不可点击，除了一个子元素。

假设您计划在您的父元素上保持“禁用”类：

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

这也假设您可以在您希望可点击的子元素上放置一个类“enable_button”。如果你不想使用一个类，我相信有一些方法可以识别它。

当用户单击重新启用按钮时，只需删除此处理程序。

于 2012-11-16T18:40:59.143 回答
0

我使用 jEditable.editable('disabled')方法的组合解决了这个问题，然后直接在禁用面板内的a和button元素上添加处理程序（不包括恢复按钮。）并确保我自己绑定的元素使用委托，所以我可以控制的任何事件已注册到面板。这使我能够使禁用/启用全局，并为每个部分编写更清晰的代码。

于 2012-11-20T23:43:51.790 回答