人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptについて

<div onclick="alert(2)">あいうえお<div onclick="alert(1)">かきくけこ</div></div>

とした場合、
「かきくけこ」をクリックすると、アラート1、アラート2が表示されます。

しかし、「かきくけこ」をクリックした時は、アラート2だけを表示したいと考えており、

アラート1は「あいうえお」をクリックした時だけにしたいのです。

うまく、そのようにする方法はあるのでしょうか。


タグの位置は変えられません。
他の都合で、どうしても入れ子にする必要があるのです。

また、実際にはアラートではなく他の動作をします。

宜しくお願いします。

●質問者: worldtravel
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

質問文に合わせて onclick 属性に書くとしたら、こんな感じです。

<div onclick="alert(2)">あいうえお<div onclick="alert(1); event.stopPropagation();">かきくけこ</div></div>

https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

きっちり書くなら、addEventListener を使います。
イベントハンドラの引数が、イベントを表すオブジェクトになります。


worldtravelさんのコメント
このような事が出来るのですね。 あきらめて、このようにしようかと考えていました。 <div onclick="hoge(2)">あいうえお<div onclick="hoge(1)">かきくけこ</div></div> > きっちり書くなら、addEventListener を使います。 承知しました。 ありがとうございました。

a-kuma3さんのコメント
addEventListener を使うなら、こんな感じです。 >|html| <div id="e2"> あいうえお <div id="e1"> かきくけこ </div> </div> <script> window.addEventListener("DOMContentLoaded", function() { var e = document.getElementById("e2"); e.addEventListener("click", function() { alert("2"); }, false); e = document.getElementById("e1"); e.addEventListener("click", function(ev) { // リスナーの引数がイベントオブジェクト alert("1"); ev.stopPropagation(); }, false); }, false); </script> ||< イベントリスナーの引数がイベントオブジェクトになります。 変数名は、何でも構いません。

worldtravelさんのコメント
ご丁寧にありがとうございます。 お聞きしようかなと思ったのですが、お聞きしにくくて... ^^;; メモしておきます。 ありがとうございました。

a-kuma3さんのコメント
>> お聞きしようかなと思ったのですが、お聞きしにくくて... ^^;; << ここは、そういうサイトなんですから気にしないことです。 後出しが気に入らないということを、態度で表明する方もいらっしゃいますが、だったら応えなきゃ良いじゃない、とか思います(ぼくは)。 このイベントリスナーの件は、「最初から回答に書いとけよ」案件ですしね <tt>:-)</tt>

worldtravelさんのコメント
m(_ _)m ありがとうございます (^^

worldtravelさんのコメント
結局、addEventListener を使う事にしました。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ