2016-07-27 6 views
0

私はこのコードを理解しようとしていますが、意味がありません。 #open_helpボタンをクリックするとが呼び出され、showHelp()が呼び出されてjQuery関数がヘルプdivを表示しますが、下に表示されている場合はイベントリスナーを追加および削除していて、hideHelp()も呼び出します。なぜ彼はそれをやっているのですか?eventListener内のコードはすぐに呼び出されませんか?

ボタンをクリックするのを待つようにhideHelpをカプセル化するだけですか?

答えて

1

のは最低限のコードと何が起こっているのか見るためにそれを再アレンジビットを簡素化してみましょう:

$("#help").show(); // Show the help dialog 

// If user clicks ANYWHERE (the whole document) 
document.addEventListener("click",function __handler__(evt){ 
    hideHelp(); // Hide the help dialog 

    // Remove myself from the event listener so that this function 
    // will not be called again when user clicks anywhere: 
    document.removeEventListener("click",__handler__,true); 
},true); 

だから、基本的にはどこにでも空白は何も(ボタン、テキスト、リンク、上のすべてのクリックイベントをつかみましたスペースはどこにでもあります)、ヘルプダイアログを非表示にする関数を実行します。これを(元のコードの前に)実行すると、クリックイベントハンドラから自身が削除され、ページ上の他のものが再びクリックを得ることができます。

0

ヘルプが表示されている場合は、基本的に、ヘルプボタンをクリックした後にドキュメント要素に追加される「クリック」イベントリスナーの一部です。つまり、ヘルプ情報が表示されたら、ページ上の任意の場所をクリックするだけで、表示された内容が再び非表示になります。

停止と即時のプロパゲーションは、彼が望むものを受け入れることが他に何も起こらないということの保険に過ぎません。トラック内のすべてのイベントハンドラと親イベントハンドラを停止します。

その後、ショーイベントが発生したときに追加された「クリック」イベントリスナーを削除します。ヘルプがクリックされると、再び追加されます。

最後に、ヘルプ要素を非表示にして、ヘルプが再度クリックされるのを待ちます。

これはあなたの質問にお答えします。

関連する問題