タイトル通りなものを作りました
マウスカーソルがある場所にあるときに定期的に実行してほしいことありますよね
画面の端にカーソルを持っていった時に、その方向にスクロールし続けるのとか
普通こういうことするとき、JavaScriptでマウスカーソルの位置の監視や、要素作ってonmouseoverイベントとonmouseoutイベントを使うなどして、スクロールする状態になったらsetTimeoutやsetIntervalで定期的にスクロールする関数を呼び出して、スクロールしない状態になったらスクロールする関数を呼び出すのをやめる とすると思います
そういうのを毎回作るのは大変なのでmousehoverというイベントを作りました
hoverの使い方があってるのかは知りません(cssの:hoverから)
要素と関数実行の間隔を指定するとマウスカーソルがその要素上にあるときに指定した間隔で実行されます
elem.addEventListener("mousehover",function(){ },false,interval);
です
第二引数の関数の中に実行内容(上の例だとスクロール)、第四引数のintervalには時間をミリ秒単位で入れます
第三引数のuseCaptureは他のaddEventListenerと一緒で、親要素から子要素に見ていく段階でイベントを発火させるか(true)、子要素から親要素に上がっていく段階で発火させるか(false)です
第四引数が必要なのでいつもどおりに省略できません
省略した場合はfalseなのでfalseってかいてください
falseだと子要素のイベントでfalseが返されたりevent.stopPropagation()が実行されると、親要素にイベントが伝播しなくなるので子要素によってはイベントが実行されなくなります
ついでにいうと、event.preventDefault()だと伝播はするけどブラウザデフォルトの操作だけをキャンセルします
return falseはevent.preventDefault()とevent.stopPropagation()の両方ってことです
作ってみて思ったことが、要素上にカーソルあるときにずっと実行し続けるのってイベントとは違うようなー…
addEventListenerに組み込んだのは失敗だったかなー
でも ま、いいか 使いやすいし
これを使ったサンプルページを作りました
http://nmm.blog.jp/hp/tool/mousehover.html
最初に上げた例のまま カーソルを端にもっていくとスクロールするものです
四方だと重なった部分では斜め移動して欲しいものですが「要素の上」だと重なった要素の上側の要素にしかならないんですよね…
親子にすれば子要素から親要素に伝播できるんですが、四方向なのでA→B→C→D→Aみたいな祖先を子供に持つ無理なことになるので結局できませんでした…
この場合は要素使わずJavaScriptでマウスカーソル位置を補足し続けてイベント起こすかの判断したほうがいいぽいですね…
イベント間隔をアニメーション終了より早くすると徐々に移動速度が上がるようになります
画面の端にカーソルを持っていった時に、その方向にスクロールし続けるのとか
普通こういうことするとき、JavaScriptでマウスカーソルの位置の監視や、要素作ってonmouseoverイベントとonmouseoutイベントを使うなどして、スクロールする状態になったらsetTimeoutやsetIntervalで定期的にスクロールする関数を呼び出して、スクロールしない状態になったらスクロールする関数を呼び出すのをやめる とすると思います
そういうのを毎回作るのは大変なのでmousehoverというイベントを作りました
hoverの使い方があってるのかは知りません(cssの:hoverから)
要素と関数実行の間隔を指定するとマウスカーソルがその要素上にあるときに指定した間隔で実行されます
(function(){addEventListenerに追加してるので使い方は
var orgael = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type,listener,useCapture,interval){
if(type==="mousehover")
during(this,listener,useCapture,interval);
else
orgael.apply(this,arguments);
}
function during(elem,func,useCapture,interval){
var tid;
elem.addEventListener("mouseover",function(){
func(elem);
tid = setInterval(func,interval,elem);
},useCapture);
elem.addEventListener("mouseout",function(){
clearInterval(tid);
},useCapture);
}
})();
elem.addEventListener("mousehover",function(){ },false,interval);
です
第二引数の関数の中に実行内容(上の例だとスクロール)、第四引数のintervalには時間をミリ秒単位で入れます
第三引数のuseCaptureは他のaddEventListenerと一緒で、親要素から子要素に見ていく段階でイベントを発火させるか(true)、子要素から親要素に上がっていく段階で発火させるか(false)です
第四引数が必要なのでいつもどおりに省略できません
省略した場合はfalseなのでfalseってかいてください
falseだと子要素のイベントでfalseが返されたりevent.stopPropagation()が実行されると、親要素にイベントが伝播しなくなるので子要素によってはイベントが実行されなくなります
ついでにいうと、event.preventDefault()だと伝播はするけどブラウザデフォルトの操作だけをキャンセルします
return falseはevent.preventDefault()とevent.stopPropagation()の両方ってことです
作ってみて思ったことが、要素上にカーソルあるときにずっと実行し続けるのってイベントとは違うようなー…
addEventListenerに組み込んだのは失敗だったかなー
でも ま、いいか 使いやすいし
これを使ったサンプルページを作りました
http://nmm.blog.jp/hp/tool/mousehover.html
最初に上げた例のまま カーソルを端にもっていくとスクロールするものです
四方だと重なった部分では斜め移動して欲しいものですが「要素の上」だと重なった要素の上側の要素にしかならないんですよね…
親子にすれば子要素から親要素に伝播できるんですが、四方向なのでA→B→C→D→Aみたいな祖先を子供に持つ無理なことになるので結局できませんでした…
この場合は要素使わずJavaScriptでマウスカーソル位置を補足し続けてイベント起こすかの判断したほうがいいぽいですね…
イベント間隔をアニメーション終了より早くすると徐々に移動速度が上がるようになります
コメントする