秘密基地、どこに作った？

マウス座標の値を保存する方法を教えてください。

解決済

  • 質問者：Onetouch
  • 質問日時：
  • 回答数：2件

座標を保存する変数1 = atan2(クリックした次のy座標 - 最初のy座標 ,　クリックした次のx座標 - 最初のx座標);
座標を保存する変数2 = 円周率 * 2 + tmp;

これをソース化しようと思ったんですが、座標は見ることができても、座標の値を保存することができません。

ボタンを押すとボタンを押したときの座標に代わってしまいます。
どうすれば、古い座標(ひとつ前にクリックした座標)を保存できますか？
一応、作業用フォルダを用意して入れ替えみたいなことしたんですが、だめでした。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>
function getMouseX(e){
document.xx.client_x.value=e.clientX;
}
document.onmousedown=getMouseX;
function CL1(){
var a=document.xx.client_x.value;
var tmp;
tmp=a;
/*
どんなコードを書けばいいかわかりません。
*/
alert(tmp);
}
</script>

<form name="xx">
<input type="text" name="client_x">
<input type="button" value="CLICK!" onClick="CL1()">
</form>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ボタンをクリックした時に、両方のイベントが発生して両方の処理がおこなわれてしまうのが、ややこしくしている元ですが・・・



実は、要素の包含関係によって、イベントの発生順序が決まっています。
http://vird2002.s8.xrea.com/javascript/DOM-Level …
なので、button → document の順だと思っていたら、documentの方が上位要素なのに先に実行されていますね。

おやっ、と思って良く見たら設定がmousedownとclickとで異なっているので、mousedownイベントが先に起こり、続いてclickイベントが起きているからですね。
両方をクリックにしてみれば、処理順が逆転するので、お悩みが何もせずに解決することがわかるかと思います。


さて、イベント発生はそのままにしておくとして・・・
対処法の一つとしては、質問者様がなさろうとしていたように、1個前の値を変数に覚えさせておいて、それを表示する方法が考えられます。
ご提示のスクリプトだと、残念ながらその意図の通りにはなっていません。
順序をよく考えてみれば、
　・値を記入する時に、記入する前に、前の値を変数に覚えさせておく
　・ボタンクリックの際は、常に（変数にある）古い値を表示
というような要領で行えばよろしいかと思います。

そうすると、こんな感じ。

var oldValue; //前の値を記憶するための変数

document.onmousedown = function(e){
oldValue = document.xx.client_x.value;
document.xx.client_x.value = e.clientX;
}

function CL1(){
alert(oldValue);
}


ところで、実際のところどのようなことをなさりたいのかはよくわかりませんが、ややこしくなっている原因は上記のように重複した処理が別個に動作することにあります。
別の対策方法として、ボタンを特別に扱って
・documentのclick（やmousedown）の処理で、ボタンを押したときは何もしないようにする。
ことでも対処できるかと思います。（ボタンを押したときは値が変わらなくなる）
イベント発生元の要素は、event.targetなどで取得することができますので、これによって処理を振り分けることで実現できます。

どうせ振り分けるなら、そこでボタンを押したときの処理を行うようにしてしまえば、ボタンクリックのイベント処理を削除できますね。
画面上のclick（やmousedown）は全てdocument要素で拾えますので、ここで包含的に処理することで、個別の処理する場合の順序などを考えなくても済むようになります。

そんな考え方の例（若干動作が変わっていますが）
※　ボタンを識別し易くするためにidを追加しています。
<!doctype html>
<html lang="ja">
<head>
<script>
document.onclick = function(e){
var t = e.target, elm = document.xx.client_x
if(t.id == "button1") alert(elm.value);
else elm.value = e.clientX;
}
</script>
</head>
<body>
<form name="xx">
<input type="text" name="client_x">
<input type="button" id="button1" value="CLICK!">
</form>
</body>
</html>


実は、上記のものでは動作しないブラウザがあります。
一つは、要素の指定の方法。
document.xx.client_x　のような方法はうまくいかない場合があります。
idやclassやtagNameを利用して、getElementById()やquerySelector()などで特定する方法をお勧めします。
もう一つはイベントの設定とイベント要素の取得
document.onclick = function(e){　～～
では、eにイベント要素が返されないブラウザがあったり、event.targetやevent.clientXでは意図する内容が取得できない場合があります。

これらは、ブラウザごとの個別の仕様によるバラツキが直接の原因なので、本質的ではないとはいうものの、実際には対処が必要で、面倒な要因の一つになっていると言えます。


・・・って、ここまで書いている間に、ANo1様がブラウザごとの差を吸収する回答をなさっているようですので、このあたりに関してはそちらを参考になさってください。

長文失礼。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

今回のケースであればボタンを押したときと、その他をクリックしたときを分ければよいのでは？



<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)});
}
function clickfunc(e){
var t = (e.srcElement || e.target);
var b=document.getElementById("button_1");
var x=document.getElementById("client_x");
if(t==b){
alert(x.value);
}else{
x.value=e.clientX;
}
}
</script>

<form>
<input type="text" name="client_x" id="client_x">
<input type="button" value="CLICK!" id="button_1">
</div>
</form>
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報