初めての店舗開業を成功させよう>>

下記のコードを実行すると、以下のようになります
 -----------------------------------
|□テキスト1                   |←<table>
 -----------------------------------
|□テキスト2                   |
 -----------------------------------

このときテキストをクリックしたらalert("hello")がでます。ですが、チェックボックス(□の部分)をクリックしてもalert("hello")が呼び出されてしまいます。理由はcheckboxとテキストが同じブロックに入っているからです。

<style>
.long_width{
 width: 100%;
 background-color: lightgreen;
}
</style>

<table border="1" class="long_width">
 <tr>
  <td onclick="alert('hello')"><input type="checkbox"></input>テキスト1</td>
 </tr>
 <tr>
  <td onclick="alert('hello world')"><input type="checkbox"></input>テキスト2</td>
 </tr>
</table>
(見やすさのためインデントは全角にしました)
このコードだとチェックボックスをクリックした時もalert("hello")してしまいます。ですが、チェックボックスを押した時はhelloは表示させたくありません。目的は、チェックボックスではない緑色の範囲をクリックしたときにhelloを表示させたいです。何か方法はありますか?

テキストをspanで包むとテキストにピッタリのボックスになり、テキストの右側の緑のエリアをクリックしてもhelloがでませんでした。また、divで包むとレイアウトが崩れました。(実際のテーブルは<td>がもっと多いものを想定しています)

よろしくお願いします

このQ&Aに関連する最新のQ&A

A 回答 (4件)

チェックボックスのonmouseove/onmouseoutでイベントを設定・解除するという手もありますよ。




function alertOn(inputTag){
 inputTag.parentNode.onclick = alertHello
}

function alertOff(inputTag){
 inputTag.parentNode.onclick = "";
}

function alertHello(){
 alert('hello world');
}

</script>
<style>
.long_width{
 width: 100%;
 background-color: lightgreen;
}
</style>

</head>
<body onload="">

<table border="1" class="long_width">
 <tr>
  <td onclick="alertHello()"><input type="checkbox" onmouseover="alertOff(this)" onmouseout="alertOn(this)"></input>テキスト1</td>
 </tr>
 <tr>
  <td onclick="alertHello()"><input type="checkbox"></input>テキスト2</td>
 </tr>
</table>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

シンプルですが、この発想は思いつきませんでした。私にとってはすごくわかりやすいコードです。他の回答者さんはhtml部分にコードが増えないように工夫されている点でも良いと思うのですが、自分の理解のしやすさを優先して、ベストアンサーに決めました!ありがとうございました。

お礼日時:2014/05/16 01:54

</input>って、ひつよう?むしするのは、かまわないが。



<table border="1" class="long_width">
 <tr>
  <td><input type="checkbox">少なくとも質問へのお礼はすべきだ。</td>
 <tr>
  <td><input type="checkbox">好きで回答者をしているのだから、スルーしても良い</td>
</table>

<script>
/*@cc_on@*/

function handle (e) {
 var t = e./*@if(1) srcElement @else@*/ target /*@end@*/;
 var r, c;

 if (t.tagName === "TD") {
  r = t.parentNode.rowIndex + 1;
  c = t.cellIndex + 1;
  alert(['R',r,'C',c," のTDだよ!"].join (''));
  alert(['中身は、', t./*@if(1) innerText @else@*/ textContent /*@end@*/].join(''));
 }
}

document./*@if(1)attachEvent('on' + @else@*/addEventListener (/*@end@*/ 'click', handle, false);

</script>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます

コードの意味が理解できなくて残念です。最近のWeb事情に最適(?)なコードになっているようなきがするのですが、私にはそれを理解する力がありませんでした。これからの参考にさせていただきます。

お礼日時:2014/05/16 01:54

全体の構成がわからないので適当ですが…




(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.long_width{ width: 100%; background-color: lightgreen; }
</style>

<script type="text/javascript">
/*@cc_on@*/
document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'click',
function(e){
 var t = e./*@if(1) srcElement @else@*/ target /*@end@*/;
 if(t.nodeName != "TD") return;
 while(t && t.nodeName != "TABLE") t = t.parentNode;
 if(t && /(^| )long_width( |$)/.test(t.className)){
  alert("TDだよ!");
 }
}, false);
</script>

</head>
<body>

<table border="1" class="long_width">
<tr>
<td><input type="checkbox"></input>テキスト1</td>
</tr>
<tr>
<td><input type="checkbox"></input>テキスト2</td>
</tr>
</table>

</body>
</html>
    • good
    • 0
この回答へのお礼

返事が遅くなりました。ご回答ありがとうございます。

ステートメントを初めて知りました。JavaScriptは適当にしか扱っていないので、全く知らなかったです。DOCTIPEからすべて作って頂いてありがとうございます。ただ、今の私のレベルではステートメントでどのように処理をifなどで分けているのかわかりません。これからの参考にさせていただきます。ありがとうございました。

お礼日時:2014/05/16 01:46

jsでの回答とは異なりますが1つ。


 
お試しされたspanで囲む方法、テキストのみになるのはspanがインライン要素だからではないでしょうか。spanにstyleでdisplay:block;でブロックにすると余白部分もカバーできると思います。
その場合段落ちしてinputと改行されてしまいますが。
 
無難にやるなら
 <tr>
  <td><input type="checkbox" /></td>
  <td onclick="alert('hello')">テキスト1</td>
 </tr>
という感じでもう一列作ってみてはどうでしょうか?
    • good
    • 0
この回答へのお礼

返事が遅くなりました。ご回答ありがとうございます。

私もその方法を試しましたが、できればセルを増やさない方法がいいです。ごめんなさい。

お礼日時:2014/05/16 01:42

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング