divの中にp、
pの中にspan、
spanの中にinputがあるとして、
クリックしたらそれぞれの要素のタグををalertで表示させたいとき、

(例1)
<div onClick="a=event.target || event.srcElement;alert(a.tagName)">div
 <p>p
  <span>span
   <input type="button" value="input">
  </span>
 </p>
</div>

で良いと思います。
(IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み)


ただ、onClick内をスッキリさせたいので

(例2)
<script>
function whereYouClick1(){
 a=event.target || event.srcElement;
 alert(a.tagName);
}
</script>
<div onclick="whereYouClick1();">div
 <p>p
  <span>span
   <input type="button" value="input">
  </span>
 </p>
</div>

とすると、FirefoxとLunascapeで動かなくなります(よね?)。



苦肉の策として


(例3)
<script>
function whereYouClick2(){
 alert(a.tagName);
}
</script>
<div onclick="a=event.target || event.srcElement;whereYouClick2()">div
 <p>p
  <span>span
   <input type="button" value="input">
  </span>
 </p>
</div>


としたらすべてのブラウザで動いたのですが、腑に落ちません。
これなら(例1)のままの方がすっきりして良かったような気がします。

ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、
Forefox, Lunascapeのために(例3)の書き方にならざるを得なくなると思いますが、気持ち悪いです。
もっときれいな書き方はないのでしょうか。

また、上の例では一旦
a=event.target || event.srcElement;
としてから、
alert(a.tagName)
とやっていますが、
alert(event.target.tagName || event.srcElement.tagName)
とやったらIEではエラーとなりました。そんなもんなんでしょうか。


基本的な事柄で申し訳ありませんが、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

>(例2)



<script type="text/javascript">
function whereYouClick1(evt){
 var a = evt.target || evt.srcElement;
 alert(a.tagName);
}
</script>

<div onclick="whereYouClick1(event)">div
 <p>p
  <span>span
   <input type="button" value="input">
  </span>
 </p>
</div>



設定するのにaddEventListener(attachEvent)を利用する方法もあります。

<参考>
ほかにも情報はいっぱいあるので、ぐぐってみてください。
http://www.findxfine.com/programming/javascript/ …
http://archiva.jp/web/javascript/event-object.html
    • good
    • 0
この回答へのお礼

あ!出来ました!

ありがとうございます!!

色々研究してみます。

お礼日時:2011/04/27 12:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報