2009-10-05 14 views
5

とページのロードが、私は、私はマウスオーバーとマウスアウト方法を私はトリガー特定の動作をさせたい画像を持ってきたときに、しかし、あなたが上にマウスを持って起こる場合は、マウスが要素の上にあるかどうかを検出ページが読み込まれたときに画像が表示されると、画像を残して戻ってくるまでmouseoverメソッドが実行されることはありません。マウスが終わったときのJavascript

マウスが要素のオフになり、その後、JSのmouseoverイベントをトリガする要素の上に来るように持つマウスなしでその場で要素の上にあるかどうかを検出する方法はありますか?同様に、document.getElementById( "blah")。Javascriptのmou​​seIsOver()型関数ですか?

答えて

4

私は、これは、ユーザから任意のアクションなしに可能であると考えています。ページが読み込まれたら、mouseoverイベントを画像にバインドして画像を非表示にします(CSS display:noneを使用)。数ミリ秒(10十分なはずです)で再びそれを表示するにはsetTimeout()を使用してください。偶数は解雇されるべきです。

、あなたのイメージに「フリック」効果を引き起こすことしたくない場合は、それにイベントを付ける代わりに、いくつかの一時的な要素を使用して、あなたのイメージにイベントを委譲しようとします。

これはブラウザ間の解決策であるかどうかはわかりませんが、Firefox 3.0のコンソールからはうまくいきました;)

+0

良い解決策。 .addEventListener(「MouseEnterイベント」、機能)でこれを混合することは良い解決策であるように思われます。 – Paul

0

マウスは、マウスイベント、すなわちmousemoveのリスニングは別に座標を取得する方法はありません、mouseoverなどしかし、これらのイベントは、ただ一つの画素でカーソルを移動すると、それらを誘発するのに十分であるという意味で非常に敏感です、カーソルがイメージの上に置かれている間も、やはりまったく珍しいはずです。

1

あなたはのMouseMoveイベントを使用することができます。これは、ユーザーがマウスを動かすたびにトリガーされます。したがって、ユーザーがマウスをまったく動かさない場合には発射しないトリガの唯一のインスタンスがあります。これはまれであるはずです。

これの唯一の問題は、あなたがコンポーネント上にしながら、これらのイベントの多くを得るだろうように、イベントは、マウスがあなたの画像の上に移動しますいつでも発射するだろうということです。おそらく、イベントが発生したときに、メソッド内に何らかのフラグを実装する必要があります。イベントが最初に発生したときにフラグをオンにし、コンポーネントを終了するときにイベントをオフにします。

これは理想的ではあるが、私は、これはおそらくあなたの問題のシナリオを満足すると思います。以下は、その解決策がどのように見えるかについての簡単な疑似コードです。うまくいくはずです。

<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/> 


... 

<script type='text/javascript'> 

var TriggerActive = false; 

function triggerOn(e){ 
    e = e||window.e; 
    if(!TriggerActive){ 
    TriggerActive = true; 
    // Do something 
    } else { 
    // Trigger already fired, ignore this event. 
    } 
} 

function triggerOff(e){ 
    e = e||window.e; 
    if(TriggerActive) 
    TriggerActive = false; 
} 

</script> 

マウスのイベント情報は、ブラウザの互換性に関する注意hereなどがあります。