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="https://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を使ってマウス動作がストップした際の判別をする際にぜひ。。。