page_javascript スキルの他の場所をクリックして div を非表示にする 2 つの方法

アイデア 1

最初のアイデアは 2 つのステップに分かれています

最初のステップ: イベント ハンドラーをドキュメントのクリック イベントにバインドして div を非表示にします

ステップ 2: イベント ハンドラーを div のクリック イベントにバインドして、イベントがドキュメントにバブリングするのを防ぎ、ドキュメントの onclick メソッドを呼び出すと div が非表示になります。

コードをコピー コードは次のとおりです:

🎜>この方法では、ページの非 div 領域がクリックされると、ドキュメントの onclick メソッドが直接またはレイヤーごとに呼び出され、div またはそのサブ要素がクリックされると、イベントが呼び出されます。常に div 自体にバブルアップするため、イベントが発生し続け、ドキュメントの onclick メソッドが呼び出されなくなり、div が非表示になり、ニーズが満たされます。


アイデア 2

DOM 上のイベントがトリガーされると、イベント オブジェクト イベントが生成されることを前述しました。このオブジェクトには、イベントに関連するすべてが含まれます。イベントを生成した要素、イベント タイプ、およびその他の関連情報を含む情報。最初のアイデアの div のクリック イベント ハンドラーによって渡されるパラメーターは、このイベント オブジェクトです。 IE でイベント オブジェクトにアクセスするには、イベント ハンドラーの指定方法に応じて、いくつかの異なる方法があります。イベント ハンドラーを DOM 要素に直接追加する場合、イベント オブジェクトはウィンドウ オブジェクトのプロパティとして存在します。
イベント オブジェクトには、target(W3C)/srcElement(IE) という重要な属性が含まれています。この属性は、イベントをトリガーした元の要素を識別します。2 番目のアイデアは、この属性を使用することです。イベント ハンドラーをドキュメントのクリック イベントに直接バインドし、イベント ソースが id==test を持つ div 要素であるか、そのサブ要素であるかをイベント ハンドラーで判断できます。そうである場合、メソッドは何も実行しません。そうでない場合、イベントは非表示になります。



コードをコピー

コードは次のとおりです:


このように、ページ上の任意の場所をクリックすると、クリック イベントが発生します。ソースが id==test を持つ div かそのサブ要素であるかどうか、それがメソッド return である場合、そうでない場合は div を非表示にすることでも、ニーズを達成できます。