そこで下記のコードを実行するとFirefoxだと、意図どおりクラス名の操作ができます。しかしIE系の場合thisの値がうまく渡せていないためエラーが起きてしまいます。
IEでも、うまくthisを渡す方法はありまでしょうか。
<html>
<body>
<ul class="test">
<li class="class_visible">リスト<span>追加領域</span></li>
<li>リスト<span>追加領域</span></li>
<li>リスト<span>追加領域</span></li>
</ul>
<script type="text/javascript" src="http://www.prototypejs.org/assets/2007/11/6/prototype.js"></script>
<script type="text/javascript"><!--
$$("ul.test li").invoke(
'observe',
'mouseover',
function (){
if( ! this.hasClassName("class_visible") ){
$A(this.parentNode.getElementsByTagName("li")).each( function(e){
e.removeClassName("class_visible");
});
}
this.addClassName("class_visible");
}
);
--></script>
<style type="text/css">
ul.test li span{
display: none;
}
ul.test li.class_visible span{
display: block;
}
</style>
</body>
</html>
こんな感じでいかがでしょう。
var page = this;
$$("ul.test li").invoke(
'observe',
'mouseover',
function (event){
var elem = event.srcElement ? event.srcElement : this;
if( ! elem.hasClassName("class_visible") ){
$A(elem.parentNode.getElementsByTagName("li")).each( function(e){
e.removeClassName("class_visible");
});
}
elem.addClassName("class_visible");
});
質問とは異なりますが、以下のサイトが参考になるかもしれません。
http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8...
http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8...
ご回答ありがとうございます。なるほど。やはり回避策としては、eventが起きた要素を取得するという形になりますでしょうか。
私もひとまず、実装時は下記で回避しました。
var elem = Event.findElement(event, "li");
ご案内いただいたevent.srcElement、またはprototype.js的に言えば、Event.Element(event)だけですと、マウスのフォーカス位置によっては、liに内包されているspan等の要素がelemに返却されてしまうので、Event.findElementを使ってliまでさかのぼっています。
やはりthisの使い方、考え方としては、こういったイベントまわりでは使わずに、イベントが起きた要素を取得するというやり方が適切になるんでしょうか?