座標を保存する変数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>
No.2ベストアンサー
- 回答日時:
ボタンをクリックした時に、両方のイベントが発生して両方の処理がおこなわれてしまうのが、ややこしくしている元ですが・・・
実は、要素の包含関係によって、イベントの発生順序が決まっています。
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様がブラウザごとの差を吸収する回答をなさっているようですので、このあたりに関してはそちらを参考になさってください。
長文失礼。
No.1
- 回答日時:
今回のケースであればボタンを押したときと、その他をクリックしたときを分ければよいのでは?
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- PHP php ログイン 1 2022/11/01 00:24
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
if構文
-
マウスをかざすとおこるイベント
-
クリックでテーブル内の背景色...
-
JavaScriptの勉強をしているの...
-
追加ボタンを押した際に ok ボ...
-
javascriptのちょっとした動作...
-
【UWSC】HTML内のある部分を抽...
-
name属性のないformタグの、中...
-
テキストボックスの背景色について
-
VBScriptでpingを実行(ブラウザ...
-
【Javascript】formで取得した...
-
一覧から選択した行の行番号を...
-
xml 読み込みランダムで表示す...
-
フォームのチェックボックスの...
-
読み込み中に「Now Loading」を...
-
複数のプルダウンを1つにまとめ...
-
Javascript DOM?
-
jquery datatablesを使用 イン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JSのボタンを複数う使うには
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
開いた子ウィンドウにあるボタ...
-
BackSpaceしたい(QNo.2734284の...
-
VB.NETで<Input>タグ、<text...
-
オンクリックで現在時刻の取得→...
-
JQueryでfunctionに引数としてI...
-
複数のテキストボックスの値の...
-
onClickがinput type="image"だ...
-
クリック→テキストボックスに追加
-
Javascriptで'(シングルクォー...
-
テキストフィールド未入力の場...
おすすめ情報