Javascript 禁用容器内元素的所有操作

我正在为一个js繁重的web应用程序实现一个交互式教程。我突出显示某个容器，并希望用户单击其中的某个元素。同时，我想阻止用户做任何其他事情，例如单击其他链接

主要问题是我不想解除任何事件的绑定-当教程关闭时，应用程序必须像以前一样工作

我首先在容器的所有子元素上注册一个处理程序：

element.on("click.tutorialLock", function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();
    e.preventDefault();
}

然后我设置它的“优先级”，以便它在任何其他事件之前执行：

handlers = element.data("events").click;
our = handlers.pop();
handlers.splice(0, 0, our);

最后，当我想要解锁某个元素时，我只需禁用该元素上的事件：

elementToEnable.off(".tutorialLock")

---

那很有效，但很重。我尝试只在定义了一些自定义事件处理程序的元素上注册事件，但它忽略了锚和其他基本元素。也许你能想出一些好主意？

我会获取活动的父元素，并将其传递到一个函数中，该函数将禁用除父元素中的事件之外的所有事件

$('.className').live ('click', function (e)
{
if (!$(this).parents('#targetParent').length))
    return false; // same as e.preventDefault() & e.stopPropogation()
});

---

希望这与您想要的类似

用户正在使用的容器的模式框和块UI插件的组合如何？我没听说过，我可能会尝试一下。不过，我很高兴听到一些“原始”的解决方案，而不用使用相当大的插件；）

live

已被弃用-将

on

与委派一起使用

live

调用

on

，因此这并不重要。我不确定在此处注册委派事件是否有意义。我需要我的处理程序是第一个执行并阻止其余部分的处理程序，在这种情况下，我只会在事件到达父级时禁用冒泡，在其子级上定义的处理程序仍将执行。还是我错了？