Disable all actions on elements inside a container
<p>I'm implementing an interactive tutorial for a js-heavy web application. I highlight some container and expect the user to click on some element inside it. At the same time, I want to prevent the user from doing anything else, e.g. clicking on a different link.</p>

<p>The main problem is that I don't want to unbind any events - when the tutorial's closed, the application must work like it did before.</p>

<p>I started with registering a handler on all the containter's descendant elements:</p>

<pre><code>element.on("click.tutorialLock", function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();
    e.preventDefault();
}
</code></pre>

<p>Then I set its "priority", so that it executes before any other events:</p>

<pre><code>handlers = element.data("events").click;
our = handlers.pop();
handlers.splice(0, 0, our);
</code></pre>

<p>Finally, when I want to unlock some element, I just disable the event on it:</p>

<pre><code>elementToEnable.off(".tutorialLock")
</code></pre>

<p>That works, but is very heavy. I tried registering the event only on elements which have some custom event handlers defined, but it omits anchors and other basic elements. Maybe you could come up with some good idea?</p>
