HTML table内文字のonclick抑止

解決済

質問者：ferc
質問日時：2014/03/06 10:27
回答数：3件

HTMLの書き方について質問です。

tableのtdにonclick処理を設定し、
さらに、そのtd内の文字列にもonclick処理を設定したいのですが、
文字列をクリックしたときに、同時にtdに設定したonclick処理も実行されてしまいます。

文字列をクリックしたときは、その文字列に設定してある処理だけ実行するようにはできないのでしょうか？

具体的なサンプルは下記の通りで、
text_funcだけを実行させたいのです。

----------------------
<html>

<head>

<script language="JavaScript" type="text/javascript">

</script>

</head>

<body>

<table border="1">
<tr>
<td style="padding:10px;" onclick="td_func()">
<a href="#" onClick="text_func();return false;">test_td</a>
</td>
</tr>
</table>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： muuming2001
回答日時：2014/03/06 10:35

直接回答ではありませんが

JavaScript　イベントバブリング　あたりの検索ワードが役に立つと思います。

この回答への補足

返信が遅くなりまことに申し訳ありません。

お教えいただいた単語からいろいろと調べることができました。
全く知識がない単語だっただけにとても助かり、勉強になりました。

ありがとうございました。

補足日時：2014/04/09 09:35

通報する

- 0
- 件

通報する

この回答へのお礼

早々のご回答ありがとうございます。
お教えいただいた内容で調べてみます。

通報する

お礼日時：2014/03/06 13:36

No.3

回答者： Ogre7077
回答日時：2014/03/06 20:31

addEventListener と stopPropagation を使いましょう

https://developer.mozilla.org/ja/docs/Web/API/ev …
例:
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 …
例:
function text_func(){
_ window.event.cancelBubble = true; // 上位要素への伝播を止める
_ 処理();
}

- 0
- 件

通報する

この回答へのお礼

返事が遅くなり申し訳ありません。
ご回答ありがとうございます。

有益な情報をいただき感謝いたします。
私の記述が悪いためだとは思いますが、なぜかcancelBubble しか効きませんでした。
初心者のため、イベントバブリングを考慮し始めると深みにはまってしまいそうだったので、
チェックボックスのON・OFFで処理を切り替えることにしました。

お手数おかけしましたが、いろいろと勉強になりました。
ありがとうございます。

通報する

お礼日時：2014/04/09 09:44

No.2

回答者： yambejp
回答日時：2014/03/06 14:21

こんな感じでどうでしょ？

・クリックに反応する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>