jsマウスは1つのボタンをクリックしてdivのフロートボックスを表示して、ページのその他のいかなる地方をクリックした後に、フロートボックスを隠します

本稿では、ページをクリックして他の場所でこのdivを隠す2つの考え方を紹介します.
考え方1
第一の考え方は二つのステップに分かれている.
ステップ1:documentのclickイベントに対してイベントハンドラをバインドし、divを非表示にする
第2ステップ:divのclickイベントに対してイベントハンドラをバインドし、イベントのバブルを阻止し、documentへのバブルを防止し、documentを呼び出すonclickメソッドはdivを非表示にします.
このように、ページ非div領域をクリックすると、直接または階層的なバブルがdocumentのonclickメソッドを呼び出し、divを非表示にし、divまたはそのサブ要素をクリックすると、イベントは常にバブルのdiv自体を呼び出し、イベントがバブルを続けることを阻止し、doumentのonclickメソッドを呼び出さずにdivを非表示にし、私たちのニーズを完了します.
考え方2
前述したように,DOM上のイベントをトリガするとイベントに関するすべての情報,イベントを生成する要素,イベントタイプなどの関連情報を含むイベントオブジェクトeventが生成され,構想1でdivのclickイベントハンドラが伝達するパラメータがこのeventオブジェクトである.IE内のeventオブジェクトへのアクセスには、指定されたイベントハンドラの方法に応じていくつかの異なる方法がある.DOM要素に直接イベントハンドラを追加する場合、eventオブジェクトはwindowオブジェクトの属性として存在します.
eventオブジェクトには、トリガイベントの元の要素を識別するtarget(W 3 C)/src Element(IE)という重要な属性が含まれています.考え方としては、この属性を利用することです.documentのclickイベントに直接イベントハンドラをバインドし、イベントハンドラでイベントソースがid=testのdiv要素またはそのサブ要素であるかどうかを判断し、そうでなければメソッドreturnは操作せず、そうでなければdivを非表示にすることができます. 
コードは次のとおりです.

	$(document).bind('click', function(e) {
		var e = e || window.event; //       
		var elem = e.target || e.srcElement;
		while (elem) { //        ，      div    
			if (elem.id && elem.id == 'test') {
				return;
			}
			elem = elem.parentNode;
		}
		$('#test').css('display', 'none'); //     div      
	});

これにより、ページのどこをクリックしてもdocumentのclickイベントに次々とバブルが発生し、イベントハンドラはイベントソースがid=testのdivまたはそのサブ要素であるかどうかを判断し、メソッドreturnであれば、divを隠すこともでき、私たちのニーズを実現することができます.
考え方の2のいくつかの細部の変化

                document.onclick = function (event) {
                    var e = event || window.event;
                    var elem = e.srcElement || e.target;

                    while (elem) {
                        if (elem != document) {
                            if (elem.id == "  ID") {
                                show();
                                return;
                            }
                            elem = elem.parentNode;
                        } else {
                            hide();
                            return;
                        }
                    }
                }

原文住所:http://www.jb51.net/article/43372.htm(原作を犯す場合は、ここではコレクション目的のみ)