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

jQueryで、下記のようにクリックされたdivのclassを監視しているとして、
$("div").click(function(event) {
console.log($(this).attr("class");
})
一番下のレベルの子の要素を特定するにはどのようにすればいいでしょうか。
現状ですと、クリックしたところに重なっている(?)divの全てのものが取得出来てしまいます。

●質問者: Hajimex
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント

DIV 要素が入れ子になった場合の話ですよね。
クリックのようなイベントは、子から親へと伝搬します。
親へのイベントの伝搬を止めるには、Event.stopPropagation() を使います。

例えば、こんな感じ。

<html>
<head>
<style type="text/css">
DIV {
 border: 1px blue solid;
 padding: 2em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
 $("DIV").click(function(event) {
 console.log($(this).attr("class"));
 event.stopPropagation(); /* ★これ! */
 })
});
</script>
</head>
<body>
<div class="C1">
 <div class="C2">
 <div class="C3">
 <div class="C4">
 コンテンツ
 </div>
 </div>
 </div>
</div>
</body>
</html>

Hajimexさんのコメント
ありがとうございます。
関連質問

●質問をもっと探す●



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