Firefoxでクリックした時の座標の取得の仕方がわかりません

質問

JavaScriptを使って、ある画像をクリックした時の座標を知りたいのですが、
Firefoxではうまく取得できません。

ImageタグのOnClickでファンクションを呼んで、ファンクションの中で
mdx= parseInt(e.pageX);
としたのですが、間違いでしょうか。

同じようにImageタグのOnClickでファンクションを呼んで、その中で
mdx = event.x;
とした場合IEではうまく取得できました。

よろしくお願いいたします。

回答No.1

BLUEPIXY · ベストアンサー

FireFoxの場合、
<img id="IMAGE01" src="img/01.jpg">

<script type="text/javascript">
document.getElementById("IMAGE01").onmousedown=dispXY;
function dispXY(e){
alert(e.pageX+","+e.pageY);
}
</script>
のようにしてみて下さい。
画像の範囲だけにしない場合は、
document.onmousedown=dispXY;
とします。

補足

教えていただいたように、document.getElementById("IMAGE01").onmousedown=dispXY;
を使ってやってみました。
1回目のクリックには反応したのですが、2回目以降、うまくいきませんでした。
連続してクリックしても座標が取得できるようにするにはどうすればよいでしょうか。

よろしくお願いします。

回答No.2

BLUEPIXY

＞２回目以降、うまくいきませんでした。
こちらで試したところでは２回目であっても座標の取得ができます。
どんな風に処理しようとしているのか補足でソースを挙げていただけますか？

なお、９／１８日は外出しているので、返事は遅くなるかもしれません。

お礼

申し訳ありません！
Mjumpに大事な１行が抜けていることに気がつきました。

x = parseInt(document.getElementById("iLv").innerHTML);

Firefoxで連続してクリックしても大丈夫でした。
すみませんでした。

後は左と右の矢印を押しっぱなしにしている間、
数値が続けて減るようにしなければならないのですが、それもうまくいきません。
もう少し勉強します。

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

補足

お忙しい中、お返事ありがとうございます。
まず、下のページを見ていただけますでしょうか。

http://www.geocities.jp/momosweetpea/scroll.html

スクロールバーで数値を選択するようにしたいのですが、
真ん中のグレーの部分をクリックした時にそのクリックした位置によって、10ずつ増える又は10ずつ減るようにしたいのです。
IEで試した場合はうまくいくのですが、Firefoxで試すと、最初の１クリックのあとうまく動きません。

onloadで呼ぶファンクションの中では
document.getElementById("iLb_m").onmousedown = Mjump;

呼ばれるファンクションMjumpでは
mdx= parseInt(e.pageX);
mdlayx = parseInt(document.getElementById("iLf").style.left);
if(mdx < mdlayx){
new_x = x - 10;
if(new_x < minValue) new_x = minValue;
mmlayx = Math.floor((new_x - minValue) * dx / (maxValue - minValue) + xmin);
document.getElementById("iLf").style.left = mmlayx;
document.getElementById("iLv").innerHTML = new_x;
}else if(mdx > (mdlayx + 7)){
new_x = x + 10;
if(new_x > maxValue) new_x = maxValue;
mmlayx = Math.floor((new_x - minValue) * dx / (maxValue - minValue) + xmin);
document.getElementById("iLf").style.left = mmlayx;
document.getElementById("iLv").innerHTML = new_x;
}
M_flag = false;
return false;
としています。

JavaScriptを習い始めたばかりで、手探りでやっている状態です。
他に全く違ったよい方法があれば、教えていただけますと幸いです。

よろしくお願いいたします。