読者です 読者をやめる 読者になる 読者になる

大学生からの Web 開発

廃れない技術よ 我が身に

解けなかった JavaScript のクリックイベント

授業で HTML, CSS, JavaScript を触るようになってきた。もともとそれらについて多かれ少なかれ知識はあるので、進行にはついていけているのだけど、自分で少し拡張を加えようとしてハマったのでメモ。

f:id:karur4n:20141008191452j:plain

授業内容

以下のようなコードを書いた。各 イメージは 1600x1200 くらいととても大きなもの。position: absolute の見えない画像がページ左上に配置してある。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <img src="img/1.jpg" id="bigImg">
  <div>
    <img src="img/1.jpg" class="thumbnail">
    <img src="img/2.jpg" class="thumbnail">
    <img src="img/3.jpg" class="thumbnail">
    <img src="img/4.jpg" class="thumbnail">
  </div>
  <script src="./app.js"></script>
</body>
</html>
.thumbnail {
  width: 300px;
}

#bigImg {
  visibility: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

こんな感じ。 f:id:karur4n:20141008191825p:plain

そして、並べられたサムネイルをクリックすると#bigImg がクリックした画像になってビジブルになるスクリプトを書いた。書いたんだけど、これが #bigImgを表示したあとはそのままで、リロードしないと表示が切り替わらないというものだった。また、img タグにonClick="displayImg('1.jpg')" と記述してあったことも気になった(onClick にはいろいろあるけど、なんか気持ち悪いので書きたくないなと思った)。

それでなんとか授業中に、JS だけでイベントを管理して、かつ#bigImgがビジブルの状態で再度クリックすると消えてくれるものを書こうとした。

書けなかった。

家に帰ってやってみるとできた。

できた

授業中に考えていたアプローチはこうだ。

  • クリックされた時に document.onclick を発火させて #bigImg を隠す
  • さらにそのクリックが thumbnail に対するものならば、 #bigImgsrcを変更して、可視化

出来なくはないだろうけど、わざわざややこしく考えていた。これだけでよかったんだ。

  • クリックされたものがサムネイルなら#bigImgのソースを変更して、表示する
  • クリックされたものがサムネイルでないなら #bigImg を隠す
var bigImg = document.getElementById('bigImg');

document.onclick = function (event) {
  if (event.target.className == 'thumbnail') {
    bigImg.src = event.target.src;
    bigImg.style.visibility = 'visible';
  } else {
    bigImg.style.visibility = 'hidden';
  }
}

もっと良い方法があれば教えてほしい。

なんてことない簡単なものだったのにできなかったことが悔しい。