Make sure that a specific Jquery click event executes first

Question

I have a complicated DOM structure with divs, uls, li, and span elements. On this elements can be a jquery click event which do some logic.

If the application goes offline I have to disable the click events on this elements.

It is possible to add a generic click event which executes first, where I can check that the application is offline and if it's than stop the propagation?

I can have click events on each part of the dom structure. (Refactoring the DOM is not an option.)

EDIT:

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

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

        </li>
    <ul>    
</div>

I found event listeners on the spans and on the LI-s too.

could you provide some basic DOM Markup ? I mean is it a nested structure where you've different click handlers on the div which contains a ul with a click handler and multiplte li with own click handler and so on ? — Fer To, Sep 16 '15 at 12:38
Have you considered alerting or redirecting the user to a "You are offline" message? — rybo111, Sep 16 '15 at 12:49
@rybo111 That is not a solution because there are two actions where this has to work. — bazsoja, Sep 16 '15 at 13:09
@bazsoja, I hope you're not the one down voting my answer since I only aimed to help you? — Igwe Kalu, Sep 16 '15 at 13:22

score -1 · Accepted Answer · edited May 23 '17 at 12:01

Maybe you can solve this with an simpler approach if you're able to categorize which elements can't have interaction while offline.

For example, let's say that all controls that are disabled in offline mode have a class called .requires-connection attached to it, like:

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

If you add an .offline-mode class to your <body> when you detect that no connection to your server is available, you can globally disable the interaction in the relevant UI controls (and in it's children as well) with:

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

Alternative Solution

If the above won't work in your context, you might just need to be aware of how those events are fired. How they bubble up and, for handlers in the same element, that jQuery fires then in the order that they're registered.

After being aware of that, you can just create a custom event handling workflow by creating custom events that might do your checks to preventDefault and/or stopPropagation when needed.

If you don't have much control on the order that the event handlers are registered you can use some techniques from this post;

Unfortunately I can't know where in the dom element is the click event. There are where the click event is on the last span child in a LI but there are a few place where the click event is on the LI element. I have more than 10000 lines of Jquery code so I can't be sure where are the events registered.. — bazsoja, Sep 16 '15 at 13:05
pointer-events:none !important; will do the trick for me thanks! — bazsoja, Sep 16 '15 at 13:25

score -1 · Answer 2 · answered Sep 16 '15 at 13:14

I think you'd be better not allowing the use of an input control, than allowing and then trying to control the event propagation.

If you asked for my suggestion, I would say disable buttons that are not applicable when user is offline and re-enable them when user is back online.

For example you may group certain controls that should work while online as follows:

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

And the script to enable/disable the above group of buttons as applicable will be:

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;
}

Note, since the above script accesses a DOM element, you should execute it on DOMContentLoaded. Using JQuery, that translates to $(document).ready(function(){ /* place the script here */ });

Make sure that a specific Jquery click event executes first

2 Answers2

Alternative Solution