onclickを使わずにクリック元を特定する方法はないでしょうか
- クリック元を特定する方法であるonclickを使わずに、別の方法を模索しています。
- イベントリスナーを使用して位置を特定することができません。
- 試した方法ではエラーが発生してしまいました。
- ベストアンサー
onclickを使わずにクリック元を特定したい
onclickを使えばクリック元の位置を判断することができますが、 onclickばかりが並ぶのはよろしくないとききました。 そこで、イベントリスナーを使うことにしました。 しかし、onclickを使わずに位置を特定することができません。 サンプルではthis.targetで取得できないか試してみましたが t.style.backgroundColorでtの部分でエラーになります。 onclickを使わずにクリック元を特定する方法はないでしょうか。 <div id="id"> <div id="sample129" class="cn"> <div>～</div> <div>～</div> </div> <div id="sample128" class="cn"> <div>～</div> <div>～</div> </div> ～1まで続く～ <div id="sample1" class="cn"> <div>～</div> <div>～</div> </div> </div> <script type="text/javascript"> var dom = document.getElementById('id'); var cds = dom.childNodes; if(cds[1].className=="cn"){ cds[1].addEventListner('click',fg(this.target),false); } function fg(t) { t.style.backgroundColor = "#000000"; var url = "http://test/" + t.id + "/"; window.open(url); } </script>
- taurin1000kg
- お礼率82% (42/51)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
>cds[1].addEventListner('click',fg(this.target),false); 第二引数は関数そのものを渡してください。 cds[1].addEventListner('click',fg,false); fg関数内では、引数がイベントオブジェクトで、 イベントオブジェクト.targetに対象となる要素が入っています。 function fg(e){ var t=e.target; 以下略 }
その他の回答 (4)
- dscripty
- ベストアンサー率51% (166/325)
Chrome だとフォーカスを維持してくれないから a:focus の効果がなくなるけど、Internet Explorer 8 と Firefox 13 はいけた。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>onclickを使わずにクリック元を特定したい</title> <style> body { font-family:arial, meiryo, sans-serif; } .cn > a { display:block; text-decoration:none; } .cn > a > span { display:block; } .cn > a:focus { background-color:black; } .cn+.cn { padding-top:1em; } </style> </head> <body> <h1>onclickを使わずにクリック元を特定したい</h1> <div id="id"> <div class="cn"> <a href="http://example.org/sample129/" target="_blank"> <span>～</span> <span>～</span> </a> </div> <div class="cn"> <a href="http://example.org/sample128/" target="_blank"> <span>～</span> <span>～</span> </a> </div> <div class="cn"> <a href="http://example.org/sample127/" target="_blank"> <span>～</span> <span>～</span> </a> </div> </div><!-- #id --> </body> </html>
お礼
cssも使えますね。有難うございます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
すみません、コピーペーストしたので間違えました。訂正です。 via:No.1 × addEventListner ○ addEventListener
お礼
訂正有難うございます。
- fujillin
- ベストアンサー率61% (1594/2576)
要領のみですが・・・ document.getElementById("id").addEventListener("click", function(evt){ var t = evt.target; while(t && t.className != "cn") t = t.parentNode; if(t) t.style.backgroundColor = "#000"; }, false); イベントハンドラの第一引数にイベントオブジェクトが返されるので、それを用いて要素を特定できます。 そこからclass="cn"の要素に遡って、背景色を変える部分のみの例。 実際にはクラス設定が複数あったり（class="abc cn"とか）する可能性があるし、また、IEの場合はイベントのバインド方法が異なったりします。
お礼
有難うございます。
- yambejp
- ベストアンサー率51% (3827/7415)
IEは無視してよいのでしょうか？ とりあえずtypo ×addEventListner ○addEventListener
お礼
有難うございます。
関連するQ&A
- 動的にonclickを割当ながら、引数を正しく渡す方法を教えてください。
皆様のお知恵を拝借させてください。 以下のように、HTML上の<div id="contents">の子になっている <div>のa～cに、動的にonclickの動作を割り当てようとしています。 Javascriptの独自関数abcの引数として、"contents"を渡すことにより、 その子となっている<div>を取得し、 それぞれについて、 「A～Cをクリックすると、それに該当するdivのidを表示する」 という内容になっています。 私の期待としては、 Aをクリックするとa Bをクリックするとb Cをクリックするとc を表示させたいのですが、 どれをクリックしてもcが表示されてしまいます。 ---------------------------------------------- <div id="contents"> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </div> <script> abc("contents"); function abc(contents){ var elm = document.getElementById(contents); var cn = elm.childNodes; for (var i = 0; i < cn.length; i++) { var oElement = cn[i]; ★ document.getElementById(oElement.id).onclick = function(){def(oElement.id);}; } } function def(id){ alert(id); } </script> ------------------------------------ 要するに、 「動的にonclickの動作を割り当てることができる」 「引数がただしく渡せる」 の2つが満たしたいのですが、上記のような方法しかわからず、 行き詰ってしまっています。 また、説明を簡略化するためにあえてdef()の中身は、 alertのみにしていますが、実際にはもう少し複雑な処理をさせています。
- ベストアンサー
- JavaScript
- onclickを使わずにイベント処理をする方法について。
onclickを使わずにイベント処理をする方法について。 【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】 されるようにしたいのですが、IEで動作せず、困っています。 下記は現在のコードです。 -------------------------------------------------------------------------- var divs = document.getElementsByTagName('div'); var listener = function(ev){ if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){ var next = ev.target.nextSibling.nextSibling; if(next.style.display != "none"){ next.style.display = "none"; }else{ next.style.removeProperty("display"); } } }; if (document.addEventListener) { document.addEventListener('click', listener, false);// IE以外 } else { document.attachEvent("onclick", listener);// IE } -------------------------------------------------------------------------- <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> -------------------------------------------------------------------------- ev.target.classNameあたりが怪しく… window.event.srcElement.classNameに変更してみましたが動作しませんでした。 html側の制約があり、出来れば上記のようなclassのみのhtmlで、 更にわがままを言うと <div class="text"> <h1>見出し</h1> <p>本文</p> </div> のようにdivにclassを振った形で実現したいです。 なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので 不要なコードが混ざっているかもしれません。 動作確認環境はIE7、IE8、Firefox、Safari（Windows）です。 納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 文字列の表示/非表示
下記のコードで、ボタンを押すたびに、 sample1 sample2 sample3 の３個の文字列の非表示/表示が切り替わるようにしたいのですが、 alert(elements.length+"個の要素を取得しました"); の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、 elements.style.display = elements.style.display == "none" ? "block" : "none"; で非表示/表示が切り替わってくれません。 何か書き方が悪いのでしょうか？ ご経験のある方、御教示ください。 <html> <head> <title>document.getElementsByClassName - class名を元にエレメントを取得する</title> </head> <!--class名を元にエレメントを取得するのサンプル--> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function execute() { var elements = document.getElementsByClassName("sample"); alert(elements.length+"個の要素を取得しました"); elements.style.display = elements.style.display == "none" ? "block" : "none"; } //--> </script> <body> <div id="sample1" class="sample" style="display:none;">sample1</div> <div id="sample2" class="sample" style="display:none;">sample2</div> <div id="sample3" class="sample" style="display:none;">sample3</div> <button onclick="execute()">サンプル実行</button> </body> </html>
- ベストアンサー
- JavaScript
- classList で、class名が付かない。
classList を使用して、新規で div タグに class 名を付けようと思っています。 div に id 名を付け、それを対象とした場合は、class 名は付きますが、 id名を含めない タグのみでは、class 名は付かないのでしょうか? コードは以下記述の通りです。 ご回答どうぞよろしくお願いいたします。 <html> <head></head> <body> <div id="hoge">class-name on tag.</div> <script> var dom = document.getElementById( 'hoge' ); //以下のように使えるなら理想です。 //var dom = document.getElementByTagName( 'div' ); dom.classList.add( 'test' ); </script> </body> </html>
- ベストアンサー
- JavaScript
- VBAでonclickイベントをクリックしたい
お世話になります。 XP／エクセル2003/IE８使用です。 テーブルタグ内で、onclickイベントでクリックすれば画面遷移するタグを VBAでクリックしたいのですが、記述方法がわかりません。 （IE起動などは大丈夫です。また、aタグやinputタグのクリックは処理できます） 具体的には、画像の「重要情報」（タブ風テーブル）から「出品情報」（タブ風テーブル）に移動し、再度、「重要情報」に戻ってきたいです。 HTMLソースは下記の通りです。 '－－－「重要情報」 <td id="basics" class="titletab-active" nowrap="nowrap" onclick="productTableController.switchTab('basics');return false;"> <span class="requiredAsterisk bold" id="tabAsterisk_basics"> <img src="https://images＊略＊.gif"></span> <span class="sprites" id="validation_error" title="" onclick="" style="display: none;"></span> <span class="sprites" id="ldr_warning" title="" onclick="" style="display: none;"></span> <span class="sprites" id="quarantine_warning" title="" onclick="" style="display: none;"></span> 重要情報</td> '－－－？？？（何の記述なのか私には不明） <td id="variation" class=" titletab-inactive hide" nowrap="nowrap" onclick="productTableController.switchTab('variation');return false;" style="display: none;"> <span class="sprites" id="validation_error" title="" onclick="" style="display: none"></span> <span class="sprites" id="ldr_warning" title="" onclick="" style="display: none"></span> <span class="sprites" id="quarantine_warning" title="" onclick="" style="display: none"></span> バリエーション</td> '－－－「出品情報」 <td id="offer" class="titletab-inactive" nowrap="nowrap" onclick="productTableController.switchTab('offer');return false;"> <span class="requiredAsterisk bold" id="tabAsterisk_offer"> <img src="https://images＊略＊.gif"></span> <span class="sprites" id="validation_error" title="" onclick="" style="display: none;"></span> <span class="sprites" id="ldr_warning" title="" onclick="" style="display: none;"></span> <span class="sprites" id="quarantine_warning" title="" onclick="" style="display: none;"></span> 出品情報</td> よろしくお願いします。
- ベストアンサー
- Excel（エクセル）
- javascriptについて教えてください。
divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>
- ベストアンサー
- JavaScript
- 連続したonclick
<table> <tr> <td><img src="a001.jpg" onclick="document.body.style.backgroundImage = 'url(a001.jpg)'"></td> <td><img src="a002.jpg" onclick="document.body.style.backgroundImage = 'url(a002.jpg)'"></td> <td><img src="a003.jpg" onclick="document.body.style.backgroundImage = 'url(a003.jpg)'"></td> </tr> </table> ******************************* １ 背景画像の切り替え画像サンプルをつくりました。 これが何十行も連続します。 CSSみたいに同じ内容が重複するときにclassで分類するみたいに、 Javascriptでも簡素化する方法はないでしょうか？ ＜HEAD＞＜/HEAD＞内には <meta http-equiv="Content-Script-Type" content="text/javascript"> しか書いていません。（Javascriptは初心者です） ２ document.body.style.backgroundColor='#ffffff'; backgroundImageとかbackgroundColorの 後方のImageとかColorの頭文字は大文字でも良いのでしょうか？
- ベストアンサー
- JavaScript
- onmouseoverの表示切り替えが上手くいかない
onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。 ＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。 どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript"> <!-- var target = null; function mOver(t){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } document.getElementByID(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } target=null; } //--> </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>
- ベストアンサー
- JavaScript
- onclick属性に外部jsと外部cssの記載方法
表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。
- 締切済み
- JavaScript
- jQueryでデータを受け渡しで動作が・・・。
jQueryでデータを受け渡しで動作がどうしてもうまくいきません。 <li>タグにjsonデータを呼び出して表示しています。 それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？ 普通においただけではダメなのでしょうか？ <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ $("<li/>",{ text : items.category+' '+ items.date+' '+items.content, 'class' : items.category, }).appendTo('ul','#portfolio'); }); }); }); $(document).ready(function() { var max = 6 /* 最大表示数 */ var mx = ':lt(' + max + ')', pf = $('#portfolio li'); pf.filter(':not(' + mx + ')').hide(); $('#navi a').click(function(){ var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-'); if(filterVal=='.all') filterVal = '*'; pf.filter(':visible').fadeOut('fast', function(){ pf.filter(filterVal + mx).fadeIn('slow'); }); }); }); </script> <div id="main"> <ul id="navi" class="tab"> <li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li> <li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li> <li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li> <li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li> </ul> <div id="samplebox"></div> <div class="content"> <ul id="portfolio"></ul> </div> <!--/ .main--> </div>
- 締切済み
- JavaScript
お礼
有難うございます。