ウィンドウ内をクリックしたときに処理を行う - JavaScript DHTML

ブラウザのウィンドウ内を左クリックしたときに JavaScript の任意の関数を実行させようとしたときのお話です。

div や img などの個別のノードでクリック時に関数を実行する場合には、そのノードの onclick 属性の値として関数を指定すればいいので簡単ですけど、画面上のどこかでクリックした時に処理をしようと思った時に、Internet Explorer だと上手く行かないことがありました。

というのも、Google Chrome では window.onclick に関数を設定すればいいのですけど、Internet Explorer では window.onclick が用意されていないため、画面をクリックしても関数が呼び出されないようでした。

 

Google Chrome でも Internet Explorer でも、画面クリック時に関数が呼ばれるようにするためには、次のように document.body に設定するようにします。

このようにすることで、ブラウザ上に表示されている画面をクリックした時に、指定した関数が呼び出されるようになりました。

 

ちなみに呼び出される関数には、引数として event オブジェクトが渡されてきます。

このオブジェクトの target プロパティを確認すると、クリックされたノードを知ることができます。よって、target プロパティの tagName や className、id などを参照することで、クリックされたオブジェクトに応じた処理を行うことも可能です。