領域内の子要素に対してもイベントを発火させる方法

以下のようなプレビュー付きのアップローダを作っていて
クリックしたときに非表示にしてあるファイル入力を起動させたいのですが
領域内の子要素（画像）をクリックしたときにもイベントを発火させるにはどうすればいいのでしょうか

<html lang="ja">
  <style>
    .drop-upload {
      border:2px dotted #0B85A1;
      color:#92AAB0;
      text-align: left;
      vertical-align: middle;
      padding:10px;
      margin: 10px;
    }

    .drop-upload input {
      display: none;
    }
  </style>
  <body>
    <div class="drop-upload">ファイルをドロップまたはクリックして選択してください
      <input class="form-control" type="file">
      <div class="preview"><img src="http://placehold.jp/150x150.png"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      $('.drop-upload').on('click', (e) => {
        console.log('click');
        $(e.target).find('input[type="file"]').click();
      });
    </script>
  </body>
</html>

$('input').click();
と書くと無限ループになってしまいます

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

回答2件

ベストアンサー

label要素を使うことで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>タイトル</title>
7  <style>
8    .drop-upload {
9      display: block;
10      border: 2px dotted #0B85A1;
11      color: #92AAB0;
12      text-align: left;
13      vertical-align: middle;
14      padding: 10px;
15      margin: 10px;
16    }
17
18    .drop-upload input {
19      display: none;
20    }
21
22    .preview {
23      display: block;
24    }
25  </style>
26
27</head>
28
29<body>
30
31  <label class="drop-upload">ファイルをドロップまたはクリックして選択してください
32    <input class="form-control" type="file">
33    <span class="preview"><img src="http://placehold.jp/150x150.png" alt></span>
34  </label>
35
36</body>
37
38</html>

また、もし jQuery で行わなければならないのであれば、以下のように行うことが出来ると思います(動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>タイトル</title>
7  <style>
8    .drop-upload {
9      border: 2px dotted #0B85A1;
10      color: #92AAB0;
11      text-align: left;
12      vertical-align: middle;
13      padding: 10px;
14      margin: 10px;
15    }
16
17    .drop-upload input {
18      display: none;
19    }
20  </style>
21
22</head>
23
24<body>
25
26  <div class="drop-upload">ファイルをドロップまたはクリックして選択してください
27    <input class="form-control" type="file">
28    <div class="preview"><img src="http://placehold.jp/150x150.png" alt></div>
29  </div>
30
31  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
32  <script>
33    $('.drop-upload').on('click', () => {
34      $(".drop-upload").find('input[type="file"]').click();
35    });
36    $('.drop-upload > input[type="file"]').on("click", function(e) {
37      e.stopPropagation();
38    });
39  </script>
40</body>
41</body>
42
43</html>

投稿2019/04/08 05:52

編集2019/04/08 06:09

s8_chu

総合スコア14731

退会済みユーザー

2019/04/08 07:15

label におきかえるだけでできました！ありがとうございます！

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

javascript
1<style>
2.drop-upload {
3border:2px dotted #0B85A1;
4color:#92AAB0;
5text-align: left;
6vertical-align: middle;
7padding:10px;
8margin: 10px;
9}
10.drop-upload input {
11display: none;
12}
13</style>
14<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
15<script>
16$(function(){
17  $('.drop-upload input[type="file"]').on('click', function(e){
18    e.stopPropagation();
19  });
20  $('.drop-upload').on('click', function(){
21    $(this).find('input[type="file"]').trigger('click');
22  });
23});
24</script>
25<form class="drop-upload">ファイルをドロップまたはクリックして選択してください
26<input class="form-control" type="file">
27<div class="preview"><img src="http://placehold.jp/150x150.png"></div>
28</form>