1

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")

それは機能しますが、非常に重いです。いくつかのカスタム イベント ハンドラーが定義されている要素でのみイベントを登録しようとしましたが、アンカーやその他の基本的な要素が省略されています。ひょっとしたら、何か良いアイデアを思いつくかもしれませんか？

4

1 に答える 1

0

アクティブな親要素を取得し、親のイベント以外のすべてのイベントを無効にする関数に渡します

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

これがあなたが望むものと似ていることを願っています

于 2012-09-19T12:46:55.183 に答える