firefoxとjavascriptとeventと。

質問

firefoxで、javascript内からeventを渡す時についての質問です。
制作環境はdreamweaver 8です。

dreamweaverで、ボタンのロールオーバー時に画像を変化させる時に自動的にMM_swapImage()というfunctionが作られますが、
ボタンのロールオーバー時に、もう一つ、吹き出しの出るfunctionを実行したいので、このようにしました。

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){
document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
}
var chkName=MM_swapImage.arguments[0];
if(chkName == 'Image4') showTooltip(event,'リンクの内容1');
if(chkName == 'Image5') showTooltip(event,'リンクの内容2');
if(chkName == 'Image6') showTooltip(event,'リンクの内容3');
if(chkName == 'Image7') showTooltip(event,'リンクの内容4');
}

showTooltip()では、event.clientX等を取得して、表示に反映させます。

これまでの経過は、
・safariでは正常に表示される。
・単純にhtmlの「onmouseover=showTooltip(event,'リンクの内容1');」では、firefoxでも正常に表示される。

原因を色々調べたところ、
・「chkName」は取得できていて、if文も問題ない。
・eventを数字等に変えるとshowTooltip自体は一応実行される。
といった状況です。
おそらくfirefoxでは、eventをjavascriptから取得するにはなにか別の方法があるのでは？と思い、調べてみたのですが、

window.event
document.event

と表記してみるくらいしか分かりませんでした。
(両方とも試しましたが、変化無しです)

もし何か分かる方がいらっしゃいましたらご教示頂けると幸いです。

回答No.2

arexis · ベストアンサー

いえいえ、好きで書いてるだけですからｗ

そうですね、そのまま使えた方が確かに便利ですね。
マウスオーバーがあるって事はマウスアウトもあるんですよね？

↓の方法は邪道でもっとスマートなキャプチャーがあるかもですが、、あれば他の人が書いてくれると思います^^;
var myEvent;
if(window.addEventListener){
document.addEventListener('mouseover',function(e){ myEvent = e }, true);
document.addEventListener('mouseout',function(e){ myEvent = e }, true);
}

これをどこの関数にもいれずに、scriptタグ内の最初の方に書いて置いて下さい。

IE以外のwindow.eventを理解できるSafariやOperaではwindow.eventを上書きが可能なので、window.eventを上書きしても良いのですが将来的にどうなるか怖いので グローバル変数 myEvent を使います。

タグの方の書き換えは不要です。
↓のMM_swapImage()の前半は質問の元のままです。

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){
document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
}

if(myEvent = window.event || myEvent){ //イベントが取れなかった場合は動作させない
var chkName=a[0];
if(chkName == 'Image4') showTooltip(myEvent,'リンクの内容1');
if(chkName == 'Image5') showTooltip(myEvent,'リンクの内容2');
if(chkName == 'Image6') showTooltip(myEvent,'リンクの内容3');
if(chkName == 'Image7') showTooltip(myEvent,'リンクの内容4');
}
}

今時のブラウザなら大抵通用すると思います。

補足

すいません、本当にありがとうございます！

そうですね、マウスアウトもあります。
一応この通りにコピーしてみましたところ、firefoxでもちゃんと動きました！

リスナーで全部のmouseover、mouseoutを取得してるところまでは分かるのですが、「コピペしたら動いちゃった」状態です…。

function(e){ myEvent = e }
とか、
if(myEvent = window.event || myEvent)
このif文は、生まれて初めて見ました。

完全に僕の許容範囲を超えました(笑)
さすがにgoogleで30分くらい調べたところで分からないですね…。

回答No.3

arexis

あ、説明も欲しかったですか？^^;

イベントのとり方は

■タグにイベントハンドラの場合は、Netscape、Firefoxでは
onclick="関数(event)" の様にeventを渡すしかないと思います。
(と言うか私はこれしかわからない)

■object.onclick = function(){ }
こういう書き方をスクリプト内でする場合は、Firefoxでは関数の引数0に自動的にイベントオブジェクトが入るので
arguments[0] がイベントオブジェクトになります。IEでは window.eventでとる必要があります。
Opera、Safariは arguments[0] も window.eventも理解できるはずです。

なので、
object.onclick = function(){
var e = arguments[0] || window.event;
}
と書く事で、どのブラウザでも e にイベントオブジェクトが入ります。
arguments[0]は長いので、
object.onclick = function(e){
e = e || window.event;
}
の様に書かれる事が多いと思います。

■attachEventやaddEventListener を使う場合は
指定した関数の引数0に自動的にイベントオブジェクトが入ります。(IEのattachEventも)
object.addEventListener('click',function(e){ /* e やarguments[0]がイベントオブジェクト */ }, false);
object.attachEvent('onclick',function(e){ /* e やarguments[0]がイベントオブジェクト */ });

*************************************************************

で、これらをふまえて
var myEvent; //宣言だけなのでmyEventは undefined
if(window.addEventListener){ //addEventListenerを理解出来る場合
document.addEventListener('mouseover',function(e){ myEvent = e }, true);
// document上のすべてのエレメントでマウスオーバーが発生して無名関数を実行
// 無名関数ではmyEventと言う変数にイベントオブジェクト(e)を入れてるだけです。
// addEventListenerの第３引数は trueにする事で、タグに書かれたマウスオーバーよりこちらが先に実行される
}
addEventListenerを理解できないブラウザではmyEventはundefinedのままです。

if(myEvent = window.event || myEvent){
これは

myEvent = window.event || myEvent;
if(myEvent){
と書くのと同じです。
代入と代入後の評価を一度に済ませてる形？だと思います。
(こんな説明であってるのかな？ｗ)

あるいは myEventにmyEventを入れる必要は本当はないので
if(window.event){ myEvent = event; }
if(myEvent){
でも良いと思います。

この説明、信用せずに話半分で読んで置いて下さいｗ
正確な説明とは言いないので^^;

お礼

度々ありがとうございます！

一回目読んだ時はこんがらがってしまいましたが、今、読み返して理解できました！

なるほど、「Firefoxでは関数の引数0に自動的にイベントオブジェクトが入る」んですね。
ブラウザによって色々違いが合って大変だなぁと痛感しました。
CSSとかでレイアウトなんていつになったら統一されるのか…なんてのも心配になってきました…。

なにはともあれ、とても助かりました。
すみません貴重な時間を度々裂いていただく事になってしまいまして。
せめて、一発で理解できるように勉強していきます。
また、お世話になる事があるような気がしてならないです(涙)

ありがとうございました。

ps.

arexisさん
どんな人：一般人
　　　　　　↑ これ絶対うそだよ(笑)

回答No.1

arexis

function MM_swapImage() { } は どうやって呼び出されていますか？

<tag onmouseover = "MM_swapImage()">
の様にタグのイベントハンドラから呼び出されている場合は
<tag onmouseover = "MM_swapImage(event)">
と書く事でfunction MM_swapImage() { }側で引数として共通で取れます。

MM_swapImage(){}がどんな引数を受け取ってるか？などが書いてる部分ではわからないので
引数の最後に,eventを書き加えて
<tag onmouseover = "MM_swapImage('引数',・・・・,event)">

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-3);i+=3)
if ((x=MM_findObj(a[i]))!=null){
document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
}
var chkName= a[0];
var ev = a[a.length-1];
if(chkName == 'Image4') showTooltip(ev,'リンクの内容1');
if(chkName == 'Image5') showTooltip(ev,'リンクの内容2');
if(chkName == 'Image6') showTooltip(ev,'リンクの内容3');
if(chkName == 'Image7') showTooltip(ev,'リンクの内容4');
}

あたりでいけるかもです？

補足

arexisさん、早速のご教示ありがとうございます。
（以前もご教示いただいていて、本当に感謝です）

呼び出し方法は
onmouseover="MM_swapImage('Image1','','../img/common/btn_head01_on.gif',1)"
という感じです。

早速やってみましたところ、無事動きました！

おっしゃる通りに
onmouseover="MM_swapImage('Image1','','../img/common/btn_head01_on.gif',1,event)"
として、

吹き出しの出るfunctionを実行するのが、MM_swapImage()を実行する全てのボタンではないので、
MM_swapImageB()と、新しくfunctionを作って無事に終了しました。

やはりjavascriptから直接eventは取れないものなのですか？？

onmouseover="MM_swapImage('Image1','','../img/common/btn_head01_on.gif',1)"
これはdreamweaverがデフォルトで書き出してくれるので、この部分がそのまま使えたら、幅が広がるなぁと思ったのですが。
(あくまで素人な発想なのですが)