[ SPECIAL ]

HTML + JavaScript

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

2012/01/29 Tomohiro Kumagai

□ ウィンドウ内をマウスでクリックした際に呼び出す関数を設定する

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

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

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

 

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

document.body.onclick = 関数名

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

 

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

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

 


 

カスタム検索

copyright © Tomohiro Kumagai @ EasyStyle G.K.
contact me: please from mail-form page.