質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

9909閲覧

JavaScriptで一定時間マウスオーバーされた場合のみ関数を実行したいです。

usawb

総合スコア26

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/05/18 21:35

編集2017/05/19 05:03

マウスオーバーの処理を作っていますが、マウスオーバーするとすぐに反応してしまいます。少し時間差をつけて処理を実行したいと考えています。
例えば、3秒間以上マウスがのっていたらイベントのmouseoverの関数実行するという処理を作りたいです。
可能な方法や、代替方法があれば教えていただきたいです。
よろしくお願いします。

JavaScript

1 2let p_area = document.querySelectorAll(".p_area "); 3 4 5 6 7 8for(let i=0;i<p_area.length;i++){ 9 (function(i){ 10 p_area[i].addEventListener("mouseover",function(){ 11 12 Flow(true,i); 13 },false); 14})(i); 15} 16 17 18function Flow(flg,i){ 19 if(flg){ 20 var timerId=setTimeout(function(){ 21 console.log("mouseover"); 22 23 24 25 },3000); 26 27 }else{ 28 clearTimeout(timerId); 29 } 30} 31 32// マウスアウトしたときタイトル詳細を消す処理 33for(let i=0;i<p_area.length;i++){ 34 (function(i){ 35 console.log("mouseout"); 36 Flow(false,i); 37 38 })(i); 39 40 41 42}

HTML

1 2<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div> 3<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div> 4<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div> 5<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div> 6<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div> 7<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div> 8

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

CSSでdelayすればマウスオーバーから遅れて表示できます。

HTML

1<div class="p_area"> 2 <div class="p_tip"><img src="https://placehold.jp/12/cc9999/993333/50x30.png?text=tooltip!" alt=""></div> 3</div>

CSS

1.p_area { 2 background-color: #c9c; 3 margin: 2em; 4 padding: 2em; 5 position: relative; 6} 7.p_tip { 8 position: absolute; 9 bottom: 100%; 10 opacity: 0; 11 transition: all 1s ease 0s; 12} 13.p_area:hover .p_tip { 14 opacity: 1; 15 transition: all 1s ease 1s; 16} 17```**動くサンプル:**[https://jsfiddle.net/z80ca151/](https://jsfiddle.net/z80ca151/) 18 19【transition-CSS3リファレンス】 20[http://www.htmq.com/css3/transition.shtml](http://www.htmq.com/css3/transition.shtml) 21 22【CSSアニメーション 入門 - Qiita】 23[http://qiita.com/soarflat/items/4a302e0cafa21477707f](http://qiita.com/soarflat/items/4a302e0cafa21477707f)

投稿2017/05/19 05:10

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/05/19 05:13

たしかにデザイン上の変更ならCSSでできる範囲のことかもしれませんね
usawb

2017/05/19 05:20

回答ありがとうございます。ひとまずこの方法で対処してみようと思います。ありがとうございました。
guest

0

HTML/JSの素人なので話半分に聞いてください。

素直に考えるならmouseoverイベントハンドラー内でsetTimeoutにより一定時間後に別のハンドラーを呼び出す方法があると思います。時間経過前にmouseout, mousemoveなど「タイムアウト処理を呼ぶべきでない状況」が発生したらclearTimeoutしたり(さらにsetTimeoutしなおしたり)といった配慮が必要になります。

なお遅延時間後に行う処理はmouseoverハンドラーと呼ぶべきでないと思います。というのはそれをmouseoverハンドラーと呼ぶことは混乱を招くと思えるからです。

蛇足:ツールチップ表示が目的だと本件のやりかたはベストではないのかな・・・と思いました。本サイトで「HTML tooltip」で検索すると別のやり方の回答が見つかります。

投稿2017/05/18 23:27

KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2017/05/18 23:51

回答ありがとうございます。 作品画像をマウスオーバーすると、その作品の詳細を表示するという処理(ツールチップ?)を表示することが目的です。 画像をタイル形式で並べる形になりますので、少しでもその上を通れば、目的ではない作品の詳細が表示されてしまいます。 教えていただいた通り、setTimeoutで処理を記述してみたのですが、時間をずらして表示することはできたのですが、他の画像の上を通るため、その目的ではない画像の詳細が数秒後に表示されてしまいました。 もし原因が分かれば教えていただきたいです。
KSwordOfHaste

2017/05/19 00:08

> 目的ではない画像の詳細が数秒後に表示されて 自分の回答にある以下を配慮していますか? > mouseout, mousemoveなど「タイムアウト処理を呼ぶべきでない状況」が発生したらclearTimeoutしたり(さらにsetTimeoutしなおしたり)といった配慮が必要になります。
usawb

2017/05/19 00:20

申し訳ありません。mouseoutで表示を非表示にする処理はしておりましたが、clearTimeoutやsetTimeoutやり直しは設定しておりませんでした。 具体的にclearTimeoutとsetTimeアウトではどのような処理をすればよいか分からないのですが、どのような記述をすればよいかよければ教えていただきたいです。
KSwordOfHaste

2017/05/19 02:58

yambejpさんが回答くださってますので重複コメントは避けますが、こうした場合「javascript clearTimeout」などで調べると解説ページがきっと見つかるはずです。そういう調べ方を学びましょう。
usawb

2017/05/19 04:13

ありがとうございます。勉強になりました。
guest

0

3秒後にも尚、マウスの位置座標が該当画像の座標上にあるかどうかを判定すれば良いだけの話ですね。

投稿2017/05/19 02:25

harashow1701

総合スコア854

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2017/05/19 04:14

コメントありがとうございます。 やってみているのですが、なかなかうまくいきません。 何かわかることがあればよろしくお願いします。 http://jsdo.it/1u.s.bamitonton.1208/4bKM
harashow1701

2017/05/19 04:20

このページにコード載せてください。 スマホからの閲覧のため、リンク先はみいちいちみないので。
usawb

2017/05/19 04:28

コード掲載しました。
harashow1701

2017/05/19 04:34 編集

目的のことを再現する為だけの最小限のコードを載せられませんか? 画像の上に3秒マウスオーバーされていた時に、alert(1)が表示されるみたいなコードで、十分だと思うんですよね。
usawb

2017/05/19 04:44

編集して簡略化しました。よろしくお願いします。
harashow1701

2017/05/19 04:49 編集

コードは載せられましたが、何が出来てて何が出来てないんですか?説明努力をお願いします。 これだと画像の上にマウスがなくても3秒過ぎたらログが出力されてしまいますよね?
usawb

2017/05/19 05:08

指定箇所に3秒間以上マウスがのった場合のみそのエリアの詳細を表示する処理を行いたいのですが、指定箇所が複数あるため、一瞬でもどれか一つの上を通ったあと、その他の指定エリアにたどり着いて3秒間以上マウスオーバーすると、その前に通ったところが3秒後に表示され、現在マウスオーバーされているところも表示され、複数表示されてしまいます。 分かりにくくなってしまって申し訳ありません。よろしくお願いします。
harashow1701

2017/05/19 05:10

私の回答にはなんて書いてありましたか?
usawb

2017/05/19 05:23

ありがとうございました。ご迷惑をおかけしました。
harashow1701

2017/05/19 05:26

いやいや、迷惑ではないですよ。人のコード待って楽しようとしないで、集まった回答をもとにコード書きましょうってことです。
guest

0

ベストアンサー

たとえばこんな感じ

javascript

1<script> 2var timerId; 3function myFunc(flg){ 4 if(flg){ 5 timerId=setTimeout(function(){ 6 document.getElementById("hoge").style.backgroundColor="red"; 7 },3000); 8 }else{ 9 clearTimeout(timerId); 10 } 11} 12</script> 13<div id="hoge" onmouseover="myFunc(true)" 14onmouseout="myFunc(false)" style="background-Color:lime;"> 15マウスをのせた3秒後に赤になる 16</div>

追記

複数のsetTimeoutを管理する場合、timerIdを配列してもてばよいでしょう

javascript

1var timerId=[]; 2document.addEventListener("mouseover",function(e){myFunc(e)}); 3document.addEventListener("mouseout",function(e){myFunc(e)}); 4function myFunc(e){ 5 var t=e.target; 6 var hoge=document.querySelectorAll('.hoge'); 7 for(var i=0;i<hoge.length;i++){ 8 if(t==hoge[i]){ 9 if(e.type=="mouseover"){ 10 timerId[i]=setTimeout(function(){ 11 t.style.backgroundColor="red"; 12 },3000); 13 } 14 if(e.type=="mouseout"){ 15 clearTimeout(timerId[i]); 16 } 17 } 18 } 19} 20

HTML

1<div class="hoge" style="background-Color:lime;"> 2マウスをのせた3秒後に赤になる 3</div> 4<div class="hoge" style="background-Color:aqua;"> 5マウスをのせた3秒後に赤になる 6</div> 7<div class="hoge" style="background-Color:yellow;"> 8マウスをのせた3秒後に赤になる 9</div>

修正版

var timerId=[]; window.onload=function(){ var hoge=document.querySelectorAll('.hoge'); for(var i=0;i<hoge.length;i++){ hoge[i].setAttribute("data-hoge",i); } } document.addEventListener("mouseover",function(e){myFunc(e)}); document.addEventListener("mouseout",function(e){myFunc(e)}); function myFunc(e){ var t=e.target; if(num=t.getAttribute("data-hoge")){ if(e.type=="mouseover"){ timerId[num]=setTimeout(function(){ t.style.backgroundColor="red"; },3000); } if(e.type=="mouseout"){ clearTimeout(timerId[num]); } } }

投稿2017/05/19 00:48

編集2017/05/19 05:08
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2017/05/19 01:27

ありがとうございます。 それでできるかどうか、試してみます
usawb

2017/05/19 01:48

一つ気になる点があるのですが、一行目の「var timerId」にはどのような効果がありますか?
yambejp

2017/05/19 01:56

setTimeoutは実行開始時にidを吐いてくれます それを利用してclearTimeoutで実行を止めるのですが そのidを参照させるためにグローバルでもたせています。
usawb

2017/05/19 02:01

分かりやすい解説ありがとうございございます。
usawb

2017/05/19 04:13

http://jsdo.it/1u.s.bamitonton.1208/4bKM 一応その通りやってみたのですが、うまくいきませんでした。 サンプルコードを載せているので、もし何か気付く点があればよろしくお願いします。
yambejp

2017/05/19 04:15 編集

もしかして適用しなくては行けない箇所が複数あるのでしょうか?
usawb

2017/05/19 04:28

はい、複数あります。
yambejp

2017/05/19 04:31

しつこくて申し訳ありません。 jQueryなどライブラリは使ってかまわないのでしょうか? それともピュアなjavascriptでいきたいですか?
usawb

2017/05/19 04:37

いえ、とてもありがたいです。個人的にはjQueryを使わずにしたいと考えているのですが、ピュアなJavaScriptが難しいようであれば、jQueryを使ってもよいと思っております。
yambejp

2017/05/19 04:43

ピュアjavascript版を追記しておきました
harashow1701

2017/05/19 04:52

配列に入るタイマーIDの順序って保証されないのでは?非同期でイベントのコールバック関数は走ってますよね?
yambejp

2017/05/19 05:01

harashow1701さん、ありがとうございます 確かにまずそうなので、ちょっと修正版あげときましす
usawb

2017/05/19 05:21

親身に答えていただきありがとうございました。ひとまずCSSで対処しておきたいと思います。のちJSでも実装できるように頑張ります。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問