teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

2021/02/04 00:32

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -4,11 +4,9 @@
4
4
  ### 前提・実現したいこと
5
5
 
6
6
  jQuery初心者です。
7
- ラッグ&ドロップで画像をアップロードするため、ドロップイベントを補足したいのですが反応しません。
7
+ ドロップイベントを補足したいのですが反応しません。
8
- 別タブで画像が開いてしまいます。
8
+ ドラッグ&ドロップすると別タブが開いてしまいます。
9
9
 
10
- まずはラベル内でドロップしたらalertを出力したいです。
11
-
12
10
  ### 発生している問題・エラーメッセージ
13
11
 
14
12
  ブラウザの検証にも、エラーは特に何も出ていません。

2

内容をシンプルに変更

2021/02/04 00:32

投稿

pecchan
pecchan

スコア592

title CHANGED
@@ -1,1 +1,1 @@
1
- ドロップイベント反応しない
1
+ クリックイベントは反応するのに、ドロップイベント反応しない
body CHANGED
@@ -16,40 +16,30 @@
16
16
  ### 該当のソースコード
17
17
 
18
18
  ```html
19
- <label class="upload-img__label" >
20
- <div class="upload-img__label__inner">
21
- <input class="upload-img__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;">
22
- <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
23
- <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
24
- </svg>
25
- <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
26
- </div>
27
- </label>
19
+ <div class="hoge" style="width:500px; height:500px; background:red;">
20
+ </div>
21
+
28
22
  ```
29
23
 
30
24
 
31
25
  ```javascript
32
26
 
33
27
  alert("これは出力される");
34
- $('.upload-img__label').on('drop', function (event) {
28
+ $('.hoge').on('drop', function (event) {
35
29
 
36
30
  alert("これは出力されない");
37
- event.stopPropagation();
31
+
38
- event.preventDefault();
39
32
 
40
-
41
-
42
33
  });
34
+
35
+ $('.hoge').on('click', function (event) {
36
+ alert("click");
37
+ });
43
38
  ```
44
39
 
45
40
 
46
41
  ### 試したこと
47
- セレクタを、
48
- .upload-img__labelから、
49
- upload-img__label__innerやupload-img__inputに変えても同じでした。
50
-
51
-
52
- dropをclickに変えると、clickイベントは反応しました。
42
+ clickイベントは反応しました。
53
43
  dropだけ反応しません。。。
54
44
 
55
45
 

1

clickは反応しました

2021/02/04 00:32

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -48,5 +48,10 @@
48
48
  .upload-img__labelから、
49
49
  upload-img__label__innerやupload-img__inputに変えても同じでした。
50
50
 
51
+
52
+ dropをclickに変えると、clickイベントは反応しました。
53
+ dropだけ反応しません。。。
54
+
55
+
51
56
  先輩方アドバイスいただけないでしょうか?
52
57
  宜しくお願いします。