- ベストアンサー
HTML table内文字のonclick抑止
- HTMLのtable内の文字に設定されたonclick処理を抑止する方法について教えてください。
- tableのtdに設定したonclick処理と文字列に設定したonclick処理を分けて実行する方法はありますか？
- 具体的なサンプルコードを使って、text_funcだけを実行する方法を教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
直接回答ではありませんが JavaScript イベントバブリング あたりの検索ワードが役に立つと思います。
その他の回答 (2)
- Ogre7077
- ベストアンサー率65% (170/258)
addEventListener と stopPropagation を使いましょう https://developer.mozilla.org/ja/docs/Web/API/event.stopPropagation 例: addEventListener('load', function(ev){ _ function listener(clickEvent) { _ _ clickEvent.stopPropagation(); // 上位要素への伝播を止める _ _ clickEvent.preventDefault(); // ブラウザのデフォルト挙動(ページ遷移)を防ぐ _ _ 処理(clickEvent.currentTarget); _ } _ document.getElementById(対象のリンクID).addEventListener('click', listener, false); }, false); 古いIEを考慮しなければならない特別な事情があるなら cancelBubble を併用してください http://msdn.microsoft.com/ja-jp/library/cc409795.aspx 例: function text_func(){ _ window.event.cancelBubble = true; // 上位要素への伝播を止める _ 処理(); }
お礼
返事が遅くなり申し訳ありません。 ご回答ありがとうございます。 有益な情報をいただき感謝いたします。 私の記述が悪いためだとは思いますが、なぜかcancelBubble しか効きませんでした。 初心者のため、イベントバブリングを考慮し始めると深みにはまってしまいそうだったので、 チェックボックスのON・OFFで処理を切り替えることにしました。 お手数おかけしましたが、いろいろと勉強になりました。 ありがとうございます。
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでどうでしょ？ ・クリックに反応するTDにfuncTDクラスを設定 ・クリックに反応するAにfuncAクラスを設定 <html> <head> <script> try{ document.addEventListener ('click',function(e){clickfunc(e)},true); //基本 }catch(e){ document.attachEvent('onclick',function(e){clickfunc(e)}); //IE } function clickfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="A" && t.className.match(/(^| )funcA( |$)/)){ text_func(); if(e.preventDefault)e.preventDefault(); //基本 else e.returnValue = false; //IE }else if(t.nodeName=="TD" && t.className.match(/(^| )funcTD( |$)/)){ td_func(); } } function td_func(){ alert("tdおした"); } function text_func(){ alert("aおした"); } </script> </head> <body> <table border="1" > <tr> <td class="funcTD"> <a href="#" class="funcA">td:funcあり、a:funcあり</a> 地雷 </td> <td> <a href="#" class="funcA">td:funcなし、a:funcあり</a> 安全地帯 </td> </tr> <tr> <td class="funcTD"> <a href="#">td:funcあり、a:funcなし</a> 地雷 </td> <td> <a href="#">td:funcなし、a:funcなし</a> 安全地帯 </td> </tr> <tr> <td class="funcTD"> td:funcあり、a:なし 地雷 </td> <td> td:funcなし、a:なし 安全地帯 </td> </tr> </table> </body> </html>
お礼
返事が遅くなり申し訳ありません。 ご回答ありがとうございます。 スタイルを変える処理も追加したかったので、 結局、チェックボックスを用意してチェック時にだけ処理を実行するようにしました。
お礼
早々のご回答ありがとうございます。 お教えいただいた内容で調べてみます。
補足
返信が遅くなりまことに申し訳ありません。 お教えいただいた単語からいろいろと調べることができました。 全く知識がない単語だっただけにとても助かり、勉強になりました。 ありがとうございました。