Question

我有一个复杂的DOM结构，包含div，uls，li和span元素。在这个元素上可以是一个jquery click事件，它做了一些逻辑。

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

可以添加首先执行的通用点击事件，在那里我可以检查应用程序是否处于脱机状态以及是否停止传播？

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

编辑：

cmd () {
    ./pan.sh -file="$FILE" \
             -param:db.name="${DB_NAME}" \
             -param:db.host="${DB_HOST}" \
             -param:db.port="${DB_PORT}" \
             -param:db.user="${DB_USER}" \
             -param:db.password="${DB_PASSWORD}" \
             -param:dataload.dir="${DATALOAD_DIR}"
}

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

Answer 1

如果您能够分类哪些元素在离线时无法进行交互，则可以使用更简单的方法解决此问题。

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

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

如果您在检测到没有与您的服务器的连接可用时向.offline-mode添加<body>课程，则可以全局禁用相关UI控件中的交互（及其中的＃）。的孩子们还有：

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

替代解决方案

如果上述内容无法在您的上下文中工作，您可能只需要知道这些事件是如何被触发的。他们如何冒泡，对于同一元素中的处理程序，jQuery按照他们注册的顺序触发。

了解这一点后，您只需创建自定义事件即可创建custom event handling workflow，以便在需要时对preventDefault和/或stopPropagation进行检查。

如果您对事件处理程序的注册顺序没有太多控制权，您可以使用this post中的一些技巧;

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 个答案:

替代解决方案