jQueryを使ってのマウス操作の判別処理は
「hover」「mouseover」「mousemove」「mouseout」などといった
マウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますが
マウス動作が止まった時「mousestop」のようなものは存在しません。

そんな要素の上でマウス動作が止まった時を判別して
判別処理を行うサンプルを作ってみたので紹介してみます。

jQueryでマウス動作がストップした時を判別して処理する方法

「jQueryでマウス動作がストップした時を判別して処理する方法」サンプルを別枠で表示

サンプルではページ上にある灰色の四角のエリアを配置し
その上でマウスカーソルの動きがストップした時を判別します。

灰色の四角のエリアの上にマウスを移動させ、
移動させている間(マウスカーソルが動いている間)は何も起こらず、
灰色の四角のエリアの上でマウスの動きを止めると同時に背景が黒に変わります。

この様にマウス動作が止まった時を判別して
処理をおこないます。

この判別処理の全体構成についてですが
まずはHTMLから。

◆HTML
<div class="moveArea"></div>

特に重要なことはありませんが
マウスの動きを判別させるエリアを
HTMLで指定しています。

このサンプルでは「.moveArea」と
クラスを付けたエリアの上でマウスの動きを判別していますが、
タグやbody全体で判別させることも可能になるかと思います。

この要素に対してCSSは以下のように指定します。

◆CSS
/* ------------------------------
   .moveArea
------------------------------ */
.moveArea {
	margin: 0 auto;
	width: 500px;
	height: 200px;
	background: #ccc;
}

CSSでも特別な指定はしません。

マウスの動きを判別するエリアのサイズと
エリアの背景色を指定しています。

エリアの上でマウスの動きが止まった際に
スクリプト側で「background」の色を変化させます。

そして実際の切り替えスクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
	var moveElm = $('.moveArea'),
	delayTime = 100;

	moveTimer = 0;

	moveElm.on('mousemove', function(){
		clearTimeout(moveTimer);

		moveTimer = setTimeout(function(){
			moveElm.css({backgroundColor:'#000'});
		}, delayTime);
	}).on('mouseout', function(){
		clearTimeout(moveTimer);

		moveElm.removeAttr('style');
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

moveElm = $(‘.moveArea’) マウスの動きを判別させるエリア
delayTime = 100 マウス動作が止まった後に処理が開始されるまでの遅延時間

これらの設定値を変更することで微調整が可能になっています。

「delayTime」で設定する値は、判別させるエリアの上で
マウス動作が止まった際にすぐに処理を開始させるのではなくて
少し時間を空けたい時などに値を大きくします。

全体の構成としては、
マウスが止まった時に実行させる処理を「setTimeout」を使って指定し、
それを「mousemove」イベントの中に入れます。

「mousemove」イベントの中では
マウスが動いている間は「setTimeout」での処理を
実行・停止を絶えず繰り返させて、
マウス動作が止まった時点で
最終的に「setTimeout」が実行される形になります。

実際にマウス動作が止まった時に実行される処理は
スクリプト14行目の位置になります。

サンプルでは背景色を変えているだけですが
マウス動作が止まった際にいろいろな処理を実行させるには
この位置にスクリプトを記述します。

マウスがエリアから離れた際に
停止した際に実行された処理を元に戻すような場合には
スクリプト19行目に記載します。

jQueryには「mousestop」のような判別処理はありませんが
この様に「mousemove」と「setTimeout」を組み合わせることで
同様の判別処理をおこなうことが可能になります。

以上がjQueryを使って
マウス動作がストップした時を判別して処理する方法の紹介でした。

この判別処理を行うことでロールオーバー処理の制御や
ドロップダウンUIの改善などに役立てることができるかと思います

jQueryを使ってマウス動作がストップした際の判別をする際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでマウス動作がストップした時を判別して処理する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner