console.logが表示されない

###前提・実現したいこと
JSにおいて、クリックイベント時にconsole.logにて文章が表示されるように設定したい。
console.log("ok!")は表示可能だが、console.log("ng!")は表記されず。

###該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="swipe-photo">
14    <ul class="swipe-photo-container clearfix">
15        <li class="swipe-photo-item"><img src="img/0.jpg" class="swipe-photo-thumbnail"></li>
16        <li class="swipe-photo-item"><img src="img/1.jpg" class="swipe-photo-thumbnail"></li>
17        <li class="swipe-photo-item"><img src="img/2.jpg" class="swipe-photo-thumbnail"></li>
18        <li class="swipe-photo-item"><img src="img/3.jpg" class="swipe-photo-thumbnail"></li>
19        <li class="swipe-photo-item"><img src="img/4.jpg" class="swipe-photo-thumbnail"></li>
20        <li class="swipe-photo-item"><img src="img/5.jpg" class="swipe-photo-thumbnail"></li>
21    </ul>
22</div>
23</body>
24</html>

javascript
1<script type="text/javascript">
2	window.addEventListener("load", function(event){
3		console.log("ok!");
4
5		// 開始時
6		document.addEventListener("click", function(event){
7		 	if(event.target.classList.contains("swipe-photo-item"))
8		 		console.log("ng!");
9		});
10
11	}, false);
12
13</script>

###補足情報(言語/FW/ツール等のバージョンなど)
まだJSに関しては勉強中のためあまり詳しくありません。
よろしければ分かりやすいアドバイスお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

手元でも試してみましたが、現状のソースのままでも、li要素のうち画像ではない箇所（例えば画像の右側にできる余白）をクリックすれば「ng」がコンソールに表示されます。

console.log("ok!")は表示可能だが、console.log("ng!")は表記されず。

とのことでしたが、画面のどこをクリックして確認したでしょうか？恐らく画像をクリックして確認されたのだと思いますが、

JavaScript
1if(event.target.classList.contains("swipe-photo-item"))

画像をクリックした場合はこのevent.targetがimg要素となります。event.targetはイベントの発生源となった最深の要素だからです。

しかし、img要素はswipe-photo-itemというclassを持っていませんので、この分岐はtruthyとなりません。そのため、コンソールに意図した結果が表示されないのではないかと思います。

img要素がクリックされることを期待するのであれば、li要素はimg要素の親ですので、event.target.parentNode.classList...とすればli要素のclassを対象とすることができます。

投稿2016/10/07 11:36

sii_side

総合スコア849

vnsa7221

2016/10/13 03:07

sii_sideさん回答ありがとうございました。画像をクリックしていたため、意図していた動きが実現できなかったのですね。親要素を取得すれば良いという簡単な方法でした・・・。ありがとうございました。

行動規範の内容に同意します

原因はほかでご指摘の通りで event.target が「最も階層の深い要素」を参照するので .swipe-photo-item の子孫要素をクリックした時に判定が期待通りに働かない事があげられます。
掲示されたコードであれば event.target と親要素の二組だけ判定すれば済みますが、汎用性を高める為に祖先要素を判定条件にすることをお勧めします。

JavaScript
1<div class="swipe-photo">
2  <ul class="swipe-photo-container clearfix">
3    <li class="swipe-photo-item"><img src="img/0.jpg" class="swipe-photo-thumbnail"></li>
4    <li class="swipe-photo-item"><img src="img/1.jpg" class="swipe-photo-thumbnail"></li>
5    <li class="swipe-photo-item"><img src="img/2.jpg" class="swipe-photo-thumbnail"></li>
6    <li class="swipe-photo-item"><img src="img/3.jpg" class="swipe-photo-thumbnail"></li>
7    <li class="swipe-photo-item"><img src="img/4.jpg" class="swipe-photo-thumbnail"></li>
8    <li class="swipe-photo-item"><span><img src="img/5.jpg" class="swipe-photo-thumbnail"></span></li>
9  </ul>
10</div>
11<script>
12document.addEventListener('click', function (event) {
13  var target = event.target, currentTarget = event.currentTarget;
14
15  while (!target.classList.contains('swipe-photo-item')) {
16    target = target.parentNode;
17
18    if (!target || !target.classList || target === currentTarget) {
19      return;
20    }
21  }
22
23  console.log('swipe-photo-item', target);
24}, false);
25</script>

Re: vnsa7221 さん

投稿2016/10/07 12:40

編集2016/10/07 12:41

think49

総合スコア18162

vnsa7221

2016/10/13 03:09

think49さん回答ありがとうございました。画像をクリックしていたため、意図していた動きが実現できなかったのですね。親要素を取得すれば良いという簡単な方法でした・・・。汎用性の高める方法も載せていただきありがとうございます。こちらのコードを参照して自分なりに作成してみたいと思います。ありがとうございました。

行動規範の内容に同意します

動いています。（動くサンプルの画像右側をクリックしてみてください）
単純に、li要素でイベントが始まったこと（event.target.classList.contains("swipe-photo-item")）に限定しているから、というだけでは。

JavaScript
1// ほぼそのまま
2    window.addEventListener("load", function(event){
3        console.log("ok!");
4
5        // 開始時
6        document.addEventListener("click", function(event){
7             if(event.target.classList.contains("swipe-photo-item"))
8                 console.log("ng!");
9        }, false);
10
11    }, false);
12```**動くサンプル：**[https://jsfiddle.net/yfLq1a02/](https://jsfiddle.net/yfLq1a02/)