确保首先执行特定的 Jquery 单击事件

Question

我有一个复杂的 DOM 结构，包含 div、uls、li 和 span 元素。 在此元素上可以是执行某些逻辑的 jquery 单击事件。

如果应用程序脱机，我必须禁用此元素上的点击事件。

可以添加一个首先执行的通用点击事件，我可以在其中检查应用程序是否脱机以及是否停止传播？

我可以在 dom 结构的每个部分都有点击事件。 （重构 DOM 不是一种选择。）

编辑：

<div>
<div>
    <ul>
        <li>
            <div>
                <span>

                </span>
            </div>
        </li>   
        <li>

        </li>
    <ul>    
</div>

我在跨度和 LI-s 上也发现了事件侦听器。

Answer 1

如果您能够对哪些元素在离线时不能进行交互进行分类，也许您可以用更简单的方法来解决这个问题。

例如，假设在离线模式下禁用的所有控件都附加了一个名为.requires-connection的类，例如：

<li id="save-stuff" class="requires-connection">
   <i class="icon-save"></i><span>Save Changes</span>
</li>

如果您在检测到服务器没有可用连接时向<body>添加.offline-mode类，则可以使用以下命令全局禁用相关 UI 控件（及其子控件）中的交互：

body.offline-mode .requires-connection {
    pointer-events:none !important;
    opacity:0.7 !important;
}

替代方案

如果以上在您的上下文中不起作用，您可能只需要了解这些事件是如何触发的。 它们如何冒泡，对于同一元素中的处理程序，jQuery 按照它们注册的顺序触发。

意识到这一点后，您可以通过创建自定义事件来创建自定义事件处理工作流，这些事件可能会在需要时进行检查以stopPropagation preventDefault和/或stopPropagation 。

如果您对注册事件处理程序的顺序没有太多控制权，您可以使用这篇文章中的一些技巧；

Answer 2

我认为您最好不允许使用输入控件，而不是允许然后尝试控制事件传播。

如果您征求我的建议，我会说禁用用户离线时不适用的按钮，并在用户重新在线时重新启用它们。

例如，您可以将某些在线时应该工作的控件分组如下：

<fieldset id="online-applicable-controls">
    <button>a button [applicable when online]</button>
    <button>another button [applicable when online]</button>
    <!-- more buttons probably -->
</fieldset>

启用/禁用上述按钮组的脚本将是：

var onlineApplicableControls = document.getElementById("online-applicable-controls");

document.addEventListener("online", enableOnlineControls);
document.addEventListener("offline", disableOnlineControls);

function disableOnlineControls() {
    onlineApplicableControls.disabled = true;
}

function enableOnlineControls() {
    onlineApplicableControls.disabled = false;
}

请注意，由于上述脚本访问 DOM 元素，因此您应该在DOMContentLoaded上执行它。 使用 JQuery，转换为$(document).ready(function(){ /* place the script here */ });

确保首先执行特定的 Jquery 单击事件

问题描述

2 个解决方案

解决方案1
-1 已采纳 2015-09-16 12:45:56

替代方案

解决方案2
-1 2015-09-16 13:14:44

确保首先执行特定的 Jquery 单击事件

问题描述

2 个解决方案

解决方案1 -1 已采纳 2015-09-16 12:45:56

替代方案

解决方案2 -1 2015-09-16 13:14:44

解决方案1
-1 已采纳 2015-09-16 12:45:56

解决方案2
-1 2015-09-16 13:14:44