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

Question

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

let p_area = document.querySelectorAll(".p_area ");





for(let i=0;i<p_area.length;i++){
    (function(i){
        p_area[i].addEventListener("mouseover",function(){

        Flow(true,i);
    },false);
})(i);
}


function Flow(flg,i){
  if(flg){
    var timerId=setTimeout(function(){
   console.log("mouseover");



    },3000);

  }else{
    clearTimeout(timerId);
  }
}

// マウスアウトしたときタイトル詳細を消す処理
for(let i=0;i<p_area.length;i++){
    (function(i){
    console.log("mouseout");
		Flow(false,i);

	})(i);



}

<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
<div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>

Answer 1

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

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

.p_area {
	background-color: #c9c;
	margin: 2em;
	padding: 2em;
	position: relative;
}
.p_tip {
	position: absolute;
	bottom: 100%;
	opacity: 0;
	transition: all 1s ease 0s;
}
.p_area:hover .p_tip {
	opacity: 1;
	transition: all 1s ease 1s;
}
```**動くサンプル：**[https://jsfiddle.net/z80ca151/](https://jsfiddle.net/z80ca151/)

【transition－CSS3リファレンス】
[http://www.htmq.com/css3/transition.shtml](http://www.htmq.com/css3/transition.shtml)

【CSSアニメーション 入門 - Qiita】
[http://qiita.com/soarflat/items/4a302e0cafa21477707f](http://qiita.com/soarflat/items/4a302e0cafa21477707f)

Comments

[yambejp]

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

[usawb]

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

Answer 2

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

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

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

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

Comments

[usawb]

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

[KSwordOfHaste]

> 目的ではない画像の詳細が数秒後に表示されて

自分の回答にある以下を配慮していますか？

> mouseout, mousemoveなど「タイムアウト処理を呼ぶべきでない状況」が発生したらclearTimeoutしたり(さらにsetTimeoutしなおしたり)といった配慮が必要になります。

[usawb]

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

[KSwordOfHaste]

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

[usawb]

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

Answer 3

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

Comments

[usawb]

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

[harashow1701]

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

[usawb]

コード掲載しました。

[harashow1701]

目的のことを再現する為だけの最小限のコードを載せられませんか？

画像の上に3秒マウスオーバーされていた時に、alert(1)が表示されるみたいなコードで、十分だと思うんですよね。

[usawb]

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

[harashow1701]

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

[usawb]

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

[harashow1701]

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

[usawb]

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

[harashow1701]

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

Answer 4

たとえばこんな感じ

<script>
var timerId;
function myFunc(flg){
  if(flg){
    timerId=setTimeout(function(){
      document.getElementById("hoge").style.backgroundColor="red";
    },3000);
  }else{
    clearTimeout(timerId);
  }
}
</script>
<div id="hoge" onmouseover="myFunc(true)"
onmouseout="myFunc(false)" style="background-Color:lime;">
マウスをのせた3秒後に赤になる
</div>

追記

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

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

<div class="hoge" style="background-Color:lime;">
マウスをのせた3秒後に赤になる
</div>
<div class="hoge" style="background-Color:aqua;">
マウスをのせた3秒後に赤になる
</div>
<div class="hoge" style="background-Color:yellow;">
マウスをのせた3秒後に赤になる
</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]);
    }
  }
}

Comments

[usawb]

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

[usawb]

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

[yambejp]

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

[usawb]

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

[usawb]

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

[yambejp]

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

[usawb]

はい、複数あります。

[yambejp]

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

[usawb]

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

[yambejp]

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

[harashow1701]

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

[yambejp]

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

[usawb]

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