teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScriptで一定時間マウスオーバーされた場合のみ関数を実行したいです。

編集履歴

質問編集履歴

3

ミスを訂正

2017/05/19 05:03

投稿

usawb
usawb

スコア26

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,6 @@
4
4
  よろしくお願いします。
5
5
  ```JavaScript
6
6
 
7
- // グローバル変数
8
7
  let p_area = document.querySelectorAll(".p_area ");
9
8
 
10
9
 
@@ -12,11 +11,11 @@
12
11
 
13
12
 
14
13
  for(let i=0;i<p_area.length;i++){
15
- (function(i){
14
+ (function(i){
16
- p_area[i].addEventListener("mouseover",function(){
15
+ p_area[i].addEventListener("mouseover",function(){
17
16
 
18
- Flow(true,i);
17
+ Flow(true,i);
19
- },false);
18
+ },false);
20
19
  })(i);
21
20
  }
22
21
 
@@ -24,10 +23,10 @@
24
23
  function Flow(flg,i){
25
24
  if(flg){
26
25
  var timerId=setTimeout(function(){
27
- cnsole.log("mouseover");
26
+ console.log("mouseover");
28
-
29
27
 
30
28
 
29
+
31
30
  },3000);
32
31
 
33
32
  }else{
@@ -37,22 +36,23 @@
37
36
 
38
37
  // マウスアウトしたときタイトル詳細を消す処理
39
38
  for(let i=0;i<p_area.length;i++){
40
- (function(i){
39
+ (function(i){
41
- console.log("mouseout");
40
+ console.log("mouseout");
42
- Flow(false,i);
41
+ Flow(false,i);
43
42
 
44
- },false);
43
+ })(i);
45
-
46
44
 
47
- })(i);
45
+
46
+
48
47
  }
49
-
50
48
  ```
51
49
  ```HTML
52
50
 
53
- <div class="p_area"></div>
51
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
54
- <div class="p_area"></div>
52
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
55
- <div class="p_area"></div>
53
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
56
- <div class="p_area"></div>
54
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
57
- <div class="p_area"></div>
55
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
56
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
57
+
58
58
  ```

2

コード編集

2017/05/19 05:03

投稿

usawb
usawb

スコア26

title CHANGED
File without changes
body CHANGED
@@ -5,28 +5,12 @@
5
5
  ```JavaScript
6
6
 
7
7
  // グローバル変数
8
-
9
- let inner_product = document.querySelectorAll(".inner_product");
10
- let product_area = document.querySelectorAll(".product_area");
11
-
12
8
  let p_area = document.querySelectorAll(".p_area ");
13
- let flow_area = document.querySelectorAll(".flow_area");
14
- let inner_flow = document.querySelectorAll(".inner_flow");
15
- let tri_top = document.querySelectorAll(".inner_flow .tri_top");
16
- let tri_under = document.querySelectorAll(".inner_flow .tri_under");
17
- let ara_area = document.querySelectorAll(".ara_area");
18
- let more_ara = document.querySelectorAll(".more_ara");
19
- let more_count = true;
20
9
 
21
10
 
22
- for(let i=0;i<product_area.length;i++){
23
- slide_count_list.push(true);
24
- }
25
11
 
26
12
 
27
13
 
28
-
29
- // タイトル詳細の表示と表示場所の変更処理
30
14
  for(let i=0;i<p_area.length;i++){
31
15
  (function(i){
32
16
  p_area[i].addEventListener("mouseover",function(){
@@ -36,43 +20,11 @@
36
20
  })(i);
37
21
  }
38
22
 
23
+
39
24
  function Flow(flg,i){
40
25
  if(flg){
41
26
  var timerId=setTimeout(function(){
42
- flow_area[i].style.transition = "opacity 2.5s ease-in";
43
- flow_area[i].style.opacity = "1";
44
- flow_area[i].style.transform = "scale(1)";
45
-
46
-
47
- if((slide_count_list[0] == true && i==2)){
48
- flow_area[i].style.left = "-270px";
49
- tri_top[i].style.left = "255px";
27
+ cnsole.log("mouseover");
50
- tri_under[i].style.left = "256px";
51
- tri_top[i].style.transform = "rotateZ(90deg)";
52
- tri_under[i].style.transform = "rotateZ(90deg)";
53
- }
54
-
55
- if((slide_count_list[0] == true && i==3)){
56
- tri_top[i].style.left = "255px";
57
- tri_under[i].style.left = "256px";
58
- tri_top[i].style.transform = "rotateZ(90deg)";
59
- tri_under[i].style.transform = "rotateZ(90deg)";
60
- flow_area[i].style.left = "-270px";
61
- }
62
-
63
- if((slide_count_list[0] == true && i==4)){
64
- tri_top[i].style.left = "255px";
65
- tri_under[i].style.left = "256px";
66
- tri_top[i].style.transform = "rotateZ(90deg)";
67
- tri_under[i].style.transform = "rotateZ(90deg)";
68
- flow_area[i].style.left = "-270px";
69
-
70
- }
71
-
72
- if((slide_count_list[0] == true && i==5)){
73
- flow_area[i].style.left = "190px";
74
-
75
- }
76
28
 
77
29
 
78
30
 
@@ -86,37 +38,21 @@
86
38
  // マウスアウトしたときタイトル詳細を消す処理
87
39
  for(let i=0;i<p_area.length;i++){
88
40
  (function(i){
89
- p_area[i].addEventListener("mouseout",function(){
90
- flow_area[i].style.opacity = "0";
91
- flow_area[i].style.transform = "scale(0)";
41
+ console.log("mouseout");
92
- flow_area[i].style.transition = "opacity 0s ease-in";
42
+ Flow(false,i);
93
43
 
94
-
95
44
  },false);
96
- Flow(false,i);
45
+
97
46
 
98
-
99
47
  })(i);
100
48
  }
101
- // あらすじの展開
102
- for(let i=0;i<ara_area.length;i++){
103
- (function(){
104
- more_ara[i].addEventListener("click",function(){
105
- if(more_count == true){
106
- ara_area[i].style.height = "auto";
107
- more_ara[i].innerHTML = "閉じる";
108
- more_count = false;
109
49
 
110
- }else if(more_count == false){
50
+ ```
111
- ara_area[i].style.height = "130px";
112
- more_ara[i].innerHTML = "もっと見る";
113
- more_count = true;
51
+ ```HTML
114
52
 
115
- }
116
- },false);
53
+ <div class="p_area"></div>
117
-
118
- })(i);
54
+ <div class="p_area"></div>
119
- }
55
+ <div class="p_area"></div>
120
-
56
+ <div class="p_area"></div>
121
-
57
+ <div class="p_area"></div>
122
58
  ```

1

コードを追加しました。（JavaScript）

2017/05/19 04:43

投稿

usawb
usawb

スコア26

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,122 @@
1
1
  マウスオーバーの処理を作っていますが、マウスオーバーするとすぐに反応してしまいます。少し時間差をつけて処理を実行したいと考えています。
2
2
  例えば、３秒間以上マウスがのっていたらイベントのmouseoverの関数実行するという処理を作りたいです。
3
3
  可能な方法や、代替方法があれば教えていただきたいです。
4
- よろしくお願いします。
4
+ よろしくお願いします。
5
+ ```JavaScript
6
+
7
+ // グローバル変数
8
+
9
+ let inner_product = document.querySelectorAll(".inner_product");
10
+ let product_area = document.querySelectorAll(".product_area");
11
+
12
+ let p_area = document.querySelectorAll(".p_area ");
13
+ let flow_area = document.querySelectorAll(".flow_area");
14
+ let inner_flow = document.querySelectorAll(".inner_flow");
15
+ let tri_top = document.querySelectorAll(".inner_flow .tri_top");
16
+ let tri_under = document.querySelectorAll(".inner_flow .tri_under");
17
+ let ara_area = document.querySelectorAll(".ara_area");
18
+ let more_ara = document.querySelectorAll(".more_ara");
19
+ let more_count = true;
20
+
21
+
22
+ for(let i=0;i<product_area.length;i++){
23
+ slide_count_list.push(true);
24
+ }
25
+
26
+
27
+
28
+
29
+ // タイトル詳細の表示と表示場所の変更処理
30
+ for(let i=0;i<p_area.length;i++){
31
+ (function(i){
32
+ p_area[i].addEventListener("mouseover",function(){
33
+
34
+ Flow(true,i);
35
+ },false);
36
+ })(i);
37
+ }
38
+
39
+ function Flow(flg,i){
40
+ if(flg){
41
+ var timerId=setTimeout(function(){
42
+ flow_area[i].style.transition = "opacity 2.5s ease-in";
43
+ flow_area[i].style.opacity = "1";
44
+ flow_area[i].style.transform = "scale(1)";
45
+
46
+
47
+ if((slide_count_list[0] == true && i==2)){
48
+ flow_area[i].style.left = "-270px";
49
+ tri_top[i].style.left = "255px";
50
+ tri_under[i].style.left = "256px";
51
+ tri_top[i].style.transform = "rotateZ(90deg)";
52
+ tri_under[i].style.transform = "rotateZ(90deg)";
53
+ }
54
+
55
+ if((slide_count_list[0] == true && i==3)){
56
+ tri_top[i].style.left = "255px";
57
+ tri_under[i].style.left = "256px";
58
+ tri_top[i].style.transform = "rotateZ(90deg)";
59
+ tri_under[i].style.transform = "rotateZ(90deg)";
60
+ flow_area[i].style.left = "-270px";
61
+ }
62
+
63
+ if((slide_count_list[0] == true && i==4)){
64
+ tri_top[i].style.left = "255px";
65
+ tri_under[i].style.left = "256px";
66
+ tri_top[i].style.transform = "rotateZ(90deg)";
67
+ tri_under[i].style.transform = "rotateZ(90deg)";
68
+ flow_area[i].style.left = "-270px";
69
+
70
+ }
71
+
72
+ if((slide_count_list[0] == true && i==5)){
73
+ flow_area[i].style.left = "190px";
74
+
75
+ }
76
+
77
+
78
+
79
+ },3000);
80
+
81
+ }else{
82
+ clearTimeout(timerId);
83
+ }
84
+ }
85
+
86
+ // マウスアウトしたときタイトル詳細を消す処理
87
+ for(let i=0;i<p_area.length;i++){
88
+ (function(i){
89
+ p_area[i].addEventListener("mouseout",function(){
90
+ flow_area[i].style.opacity = "0";
91
+ flow_area[i].style.transform = "scale(0)";
92
+ flow_area[i].style.transition = "opacity 0s ease-in";
93
+
94
+
95
+ },false);
96
+ Flow(false,i);
97
+
98
+
99
+ })(i);
100
+ }
101
+ // あらすじの展開
102
+ for(let i=0;i<ara_area.length;i++){
103
+ (function(){
104
+ more_ara[i].addEventListener("click",function(){
105
+ if(more_count == true){
106
+ ara_area[i].style.height = "auto";
107
+ more_ara[i].innerHTML = "閉じる";
108
+ more_count = false;
109
+
110
+ }else if(more_count == false){
111
+ ara_area[i].style.height = "130px";
112
+ more_ara[i].innerHTML = "もっと見る";
113
+ more_count = true;
114
+
115
+ }
116
+ },false);
117
+
118
+ })(i);
119
+ }
120
+
121
+
122
+ ```