- ベストアンサー
効率良くイベントに引数を渡すやり方
sample2に引数「x」「y」を渡したいが為に 次のように何段階も同じような作業をしなくてはならない方法しか 自分は思いつかないのですが、何かもっと効率的な方法はあるのでしょうか？ function main() { var element = document.createElement('div'); element.x = x; element.y = y; element.onclick = function(){ sample1(this.x, this.y); }; } function sample1(x, y) { var element = document.createElement('span'); element.x = x; element.y = y; element.onclick = function(){ sample2(this.x, this.y); }; } function sample2(x, y) { alert("x="x+" y="+y); }
- takagoo100
- お礼率85% (739/868)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
今までの補足からすると、 「目的」はマウスクリックで、テーブルの行、列と、マウスの位置が得られればいいという事でしょうか？ 行、列はmain関数の値でなくて「this」だけ渡して → onclick=function(){sample(this)} DOMで追えばなんとかなります。 マウス位置に関してはイベントオブジェクトを引数渡しにせずにグローバルオブジェクトにしておけばいつでも参照できます。(IE方式) <html> <head> <title></title> <script type="text/javascript"> // ※1 グローバルオブジェクト event を使えるようにする // 参考 http://p2b.jp/index.php?UID=1152131691 if(window.addEventListener){ (function(){ for (var property in Event.prototype){ if(property.match(/MOUSE|CLICK/)){ window.addEventListener(property.toLowerCase(), function(e){ window.event = e; }, true); } } }()); }; // spanのクリックイベント処理 function sample(obj){ // イベント発生元(span)からテーブルのセル、行を得る // http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-64060425 var TD = obj.parentNode;//TDはspanの親ノード var TR = TD.parentNode;//TRはTDの親ノード sample_sub(TD.cellIndex,TR.rowIndex); // cellIndex、rowIndexが位置を示す。 } function sample_sub(posX,posY){ alert( 'X:'+posX +' Y:'+posY +' mouseX:'+event.clientX // ※1によりeventオブジェクトは常に参照可 +' mouseY:'+event.clientY ) } </script> </head> <body> <!-- scriptで生成するようだけどとりあえず固定表 --> <table border="1"> <tr><td><span onclick="sample(this)">１あ</sample></td> <td><span onclick="sample(this)">１い</sample></td> <td><span onclick="sample(this)">１う</sample></td></tr> <tr><td><span onclick="sample(this)">２あ</sample></td> <td><span onclick="sample(this)">２い</sample></td> <td><span onclick="sample(this)">２う</sample></td></tr> <tr><td><span onclick="sample(this)">３あ</sample></td> <td><span onclick="sample(this)">３い</sample></td> <td><span onclick="sample(this)">３う</sample></td></tr> </body> </html>
その他の回答 (4)
- susie-t
- ベストアンサー率86% (37/43)
eって、イベントオブジェクトですよね？ 以下のようにすれば動作すると思います。詳しくは参考URLを参照してください。 function sample1(x, y) { var element = document.createElement('span'); element.onclick = function(e){ sample2((e||window.event), x, y); }; }
お礼
ご返答ありがとうございます。 そのやり方でできました。ありがとうございます。
- steel_gray
- ベストアンサー率66% (1052/1578)
どうもやりたい事がわからないのいですが、こういう事？ <html> <head> <title></title> </head> <script type="text/javascript"> function main() { main.x = 111; main.y = 222; } function sample2() { if(main.x){ alert("x="+main.x+" y="+main.y); } else { alert('mainが実行されていません') } } </script> <body> <input type="button" value="main実行" onclick="main()"> <input type="button" value="sample2実行" onclick="sample2()"> </body> </html>
お礼
ご返答ありがとうございます。 ある程度具体的な例だとこのような感じになります。 表のようなものを作って（ここでは３×３）、 そのクリックされたマスが後の関数で必要になるので どうにかして伝えられないかと考えています。 ついでにクリックしたときに現れるメニューの表示させる位置も 設定したいので、クリックされたマウスの位置も取得したいです。 こういう一連の仕組みを、うまいぐあいにクラスかなにかで纏められないかと 考えているのですが、それ自体をあまり理解してないのでお手上げという状況です・・・ function main(x, y) { for(var y = 1; y <= 3; y++){ for(var x = 1; x <= 3; x++){ var Element = document.createElement("td"); Element.x = x; Element.y = y; Element.onclick = function(){ menu(this.x, this.y); } document.body.appendChild(Element); } } } function menu(x, y) { var textNode = document.createTextNode("メニュー"); var element = document.createElement('span'); ←これを表示させる位置が欲しいのでeが必要 var mouseX = e.clientX; var mouseY = e.clientY; element.style.left = mouseX; element.style.left = mouseY; element.onclick = function(){ do_something(x, y); }; element.appendChild(textNode); } function do_something(x, y) { alert("x="x+" y="+y);←main関数に記述してあるx、yがここ（この関数）で必要になる
- susie-t
- ベストアンサー率86% (37/43)
コードからやりたいことがいまいち見えてこないのですが、 たぶん以下でもOKだと思います。 ------------------------------------- function main() { var element = document.createElement('div'); //x,yの定義と設定 element.onclick = function(){ sample1(x, y); }; } function sample1(x, y) { var element = document.createElement('span'); element.onclick = function(){ sample2(x, y); }; } function sample2(x, y) { alert("x="+x+" y="+y); } ------------------------------------- ちょっと不思議な感じがするかもしれませんが、 クロージャのレキシカルスコープの特性から、これでOKです。
お礼
ご返答ありがとうございます。 すいません、コードに関しては本来はもっと複雑（滅茶苦茶）で 例にするために簡潔にしたつもりでしたが、逆に意味分からないものになってしまいました・・・ susie-tさんのやり方でできるのは確認しました。 後付けで申し訳ないのですが、マウス座標取得とかで必要になる「e」を 使いたいと思い、それも引数に付加したのですが、 それが1つ目の引数だとすると、2つ目3つ目のx,yの引数が合わなくなるのです・・・ この場合はどのようなやり方で解決できるのでしょうか？ function sample1(x, y) { var element = document.createElement('span'); element.onclick = function(){ sample2(x, y); }; ← これをfunction(){ sample2(e, x, y); };こうするとエラーが出てしまう } function sample2(e, x, y) { var mouseX = e.clientX; var mouseY = e.clientY; alert("x="+x+" y="+y);←yがundefinedになる }
上位スコープに変数を作成する のが早いと思う。
お礼
ご返答ありがとうございます。 あまり理解できないのですが、具体的にどのような感じになるのでしょうか？ main() の中にある「x」「y」は、予め決まった値ではなく、 実行時にmain()の中だけで決まるような値です。 その場合でもそのやり方でできるのでしょうか？
お礼
ご返答ありがとうございます。 なるほど、テーブルからセル、行を得る方法があったんですか。 あと ＞// ※1 グローバルオブジェクト event を使えるようにする これは便利ですね。