- PR -

【ASP.NET】CheckBoxListでAttributes("onclick")に設定したjavascriptが2回起動してしまう。

投稿者投稿内容
cedar
会議室デビュー日: 2005/09/13
投稿数: 10
投稿日時: 2005-09-29 22:57
引用:

Nullぽさんの書き込み (2005-09-29 17:50) より:
件名の通りチェックボックスリストで以下のソース

CheckBoxList1.Attributes("onclick") = "javascript:alert('TEST');"

を設定したところ

□ 選択肢1
□ 選択肢2
-- --------
A  B

Aのチェック箇所をクリックの際にはアラートが1度表示されるだけで
思惑通りに動作しているのですが、Bの選択肢部をクリックするとBを
クリックした際にアラートが一度表示され、その後Aの箇所にチェック
が入る際にもう一度アラートが表示されてしまいます。

これは仕様でしょうか? Bをクリックした際にアラートを1度だけ表
示させる方法をご存知の方ご教授願えますでしょうか?

よろしくお願いいたします。 m(_ _)m




そのままだと、たしかにそうなりますね。

期待した動作になるように
ためしにVB.netで作って見ました。
今の環境がwebMatrixしかなかったのでこんな感じになってしまいましたが・・・^^;

<%@ Page Language="VB" %>
<script runat="server">
sub page_load()
me.CheckBoxList1.attributes("onclick")="test();"
end sub
</script>
<html>
<head>
<script language="javascript">
int1=0;
function test(){
if(int1==0){
int1=1;
alert('test');
}
}

</script>
</head>
<body>
<form runat="server">
<asp:CheckBoxList id="CheckBoxList1" runat="server" Height="44px">
<asp:ListItem Value="A">A</asp:ListItem>
<asp:ListItem Value="B">B</asp:ListItem>
</asp:CheckBoxList>
</form>
</body>
</html>

なんか、逃げにしかなってないような感じだなあ orz
#後から見ると、いらないものごてごてついていたので修正


[ メッセージ編集済み 編集者: cedar 編集日時 2005-09-29 23:00 ]

[ メッセージ編集済み 編集者: cedar 編集日時 2005-09-29 23:02 ]
burton999
ぬし
会議室デビュー日: 2003/10/06
投稿数: 898
お住まい・勤務地: 東京
投稿日時: 2005-09-30 00:18
コード:
this.CheckBoxList1.Items.Add(new ListItem("val1", "1"));
this.CheckBoxList1.Items.Add(new ListItem("val2", "2"));
((CheckBox)this.CheckBoxList1.Controls[0]).Attributes.Add("onClick", "alert('aaa')");
((CheckBox)this.CheckBoxList1.Controls[1]).Attributes.Add("onClick", "alert('bbb')");



こんな感じで実装すればOKかと。
ただ、Table全体にonClickを設定すると、なぜ2回表示されるのかは、私もわかりません。。。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2005-09-30 08:55
こんにちは、じゃんぬ です。

引用:

burton999さんの書き込み (2005-09-30 00:18) より:

ただ、Table全体にonClickを設定すると、なぜ2回表示されるのかは、私もわかりません。。。


onChange だとどうですかね?
onChange は Table に対しては無効でしたかね?


_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
Nullぽ
会議室デビュー日: 2005/09/27
投稿数: 13
投稿日時: 2005-09-30 09:40
おはようございます。 引き続き調査していただき
ありがとうございます。

onchangeは試して見ましたが、何もおこりませんでした。

burton999様の方法で今回は実装させていただきます。

引用:


ただ、Table全体にonClickを設定すると、なぜ2回表示されるのかは、私もわかりません。。。



確かに自動的に生成されるテーブルに対しては
1度しかクリックしていないはずなんですが。。。

選択要素のラベルをクリックした際にチェックボックスのクリック
を起こすようなコードも自動的に生成されているのでしょうか?

いづれにしても、今回のケースではburton999様から示していただいた
正しいやり方なのだと思います。

調査していただいた皆様大変ありがとうございました。
一応解決です^^
えんぞ@?
ぬし
会議室デビュー日: 2004/07/06
投稿数: 271
お住まい・勤務地: はまっこ
投稿日時: 2005-09-30 10:12
引用:

Nullぽさんの書き込み (2005-09-30 09:40) より:

確かに自動的に生成されるテーブルに対しては
1度しかクリックしていないはずなんですが。。。


W3C和訳文
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.9
によると、
「LABEL要素がフォーカスを受けた場合、結びついているコントロールにフォーカスが渡される」
とは書いてあるものの今一つピンと...!?

で、杜甫々をみたところ
http://www.tohoho-web.com/html/label.htm
「その部品をクリックしたのと同じ動作」とあるので、2度発生するのはなんとなく納得出来るような...(謎
# と、強引に自分自身に納得させる(^^;
todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2005-09-30 11:01
Label
引用:

ユーザーがラベルをクリックしたとき、onclickイベントがラベルに送られ、htmlForプロパティで指定されたコントロールに渡される。



onclickイベント
引用:

このイベントはイベントバブル(階層を上る)である。イベントバブルは、そのイベントが発生したオブジェクトの上位エレメントのいずれかで処理することができる。



イベントの流れは一応説明がつきますね。
Nullぽ
会議室デビュー日: 2005/09/27
投稿数: 13
投稿日時: 2005-09-30 12:06
W3Cでの規定など参考になる書き込みありがとうございます。

その後CheckBoxListのAttributesではなくItemsのAttributes
へ変更してみたのですが、今度はクリックすら起こりません。
というよりも、規定したjavascriptがHTMLへ出力されません。

私の認識不足でしょうか? もう少しAttributesについて詳しく
調べてみることにします。 orz

ソース
コード:

CheckBoxList1.Items(0).Attributes("onclick") = "javascript:alert('TEST');"
CheckBoxList1.Items(1).Attributes("onclick") = "javascript:alert('TEST');"



HTMLソース
コード:

<table id="CheckBoxList1" border="0" style="Z-INDEX: 101; LEFT: 288px; POSITION: absolute; TOP: 72px">
<tr>
<td>
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1:0" />
<label for="CheckBoxList1_0">選択肢1</label></td>
</tr>
<tr>
<td>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1:1" />
<label for="CheckBoxList1_1">選択肢2</label>
</td>
</tr>
</table>


todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2005-09-30 12:46
http://support.microsoft.com/default.aspx?scid=kb;ja-jp;Q309338
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=23837&forum=7

スキルアップ/キャリアアップ(JOB@IT)