Javascriptのイベントがマウス葉のブラウザウィンドウの"スクリーンを複製]

StackOverflow https://stackoverflow.com/questions/1672142

質問

この質問に答えはこちら

私は一部にJavascriptコード実行時にマウス葉のブラウザウインドウです。まみをサポートする必要があるサファリ(WebKit.)

たけmouseoutハンドラにウインドウです。このハンドラが確実に呼び出されるのは、マウス葉のブラウザウインドウです。がないものの、バブリングとも呼ばれるマウスを移動要素の書きします。かどうかを判定するのにはマウスでは実際の画面としている場合にだけ移動と。

マウス葉の画面で、ちょうど一のイベントが生成され、対象の要素の要素をマウスであった。なのでチェックが対象元素のウィンドウまたはドキュメントは無効となります。および包装、全ページ目に見えないを含む事業部動作しないのいずれかの場合は、divは目に見えないだけに、そのマウスできないので、なんとも変わります。

(同じようなことが起きれば、ハンドラのドキュメントです。体に、驚くほど書きします。本体は取得しませんmouseover/mouseoutイベント時にマウスが入るとまたは紅葉、空の一部の窓など、空の縦空間を作成した絶対位置決めの素子bottom:0になります。そのスペースドキュメントウィンドウ取得しmouseover/mouseoutイベントに対応するため <html>が書きします。体になくてはなりません。)

アイディアをやった:

  • 各mouseoutイベントの実際の位置のマウスがこのウインドウです。がわからない場合には実際に可能かるように聞こえるよう難を解消すべてのレース。
  • また登録mouseoverハンドラの検出のみの場合mouseoutいただかない（又は後すぐにより、mouseover.がることが必要と考えていますテットンと申します。

を使用していまprototype.js では理想的にはこのように、溶液の試作品のイベントです。見出すことはできなかったが図れる部分です。

感謝の他のご提案！

役に立ちましたか？

解決

の概要：のこれは、マウスアウトイベント中relatedTargetプロパティをチェックすることできれいに行うことができます。 relatedTargetは、文書の子でない場合は、マウスだけでウィンドウを残しました。それは自分で行うのは簡単だが、あなたはしたくない場合は、いくつかのライブラリ（MooToolsは、将来のプロトタイプは...）機能で焼きしており、他の人（現在のプロトタイプ）の拡張機能が利用可能です。 IEで、あなたの代わりにマウスアウトの非バブリングバージョンですmouseleaveを、使用することができます。

詳細ます：

IEは、マウスオーバーとマウスアウトの非バブリングバージョンですMouseEnterイベントとmouseleaveと呼ばれるイベントがあります。他のブラウザではありませんが、彼らがした場合、ウィンドウまたはドキュメントにmouseleaveリスナーを設定すると、トリックを行うだろう。

ケン・スナイダーという名前の紳士が救助に来ます：

  

マウスオーバーで、relatedTarget   プロパティからノードを参照します   そのポインタが来ました。マウスアウトでは、   relatedTargetのプロパティ参照   ポインタwent.Onにノード   いずれにせよ、スコープは、ノードであります   どのイベントがattached.Whenされます   relatedTargetはのない子であります   currentTarget、あるmouseoverイベント   MouseEnterイベントとAに相当   マウスアウトイベントは同等です   mouseleaveイベントます。

- http://kendsnyder.com/archives/6-MouseEnter-そして、MouseLeave.html の

これは、他のブラウザでのMouseEnterとmouseleaveを実装することが可能となります。実際には、ケンはこれを行うには、同じプロトタイプのコードを提供します： http://kendsnyder.com/sandbox/enterleave /MouseEnterLeave.jsする

DurothはMooToolsのは、すでに同様のものを含んでいることをコメントで指摘しました。 （おかげでDuroth。）これは、この機能を含むことができる次期プロトタイプのリリース（1.6.2）のように聞こえるが、私は明確な何かを見つけることができません。

他のヒント

のみを使用しjavascript、試作やjqueryなど。

<html>
<head>
<script type="text/javascript">
  var mouseX = 0;
  var mouseY = 0;
  var counter = 0;
var mouseIsIn = true;
function wireEvent() {
window.addEventListener("mouseout",
    function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
        if ((mouseY >= 0 && mouseY <= window.innerHeight)
        && (mouseX >= 0 && mouseX <= window.innerWidth))
            return;
        //do something for mouse out
        counter++;
        mouseIsIn = false;
        document.getElementById('in_out').innerHTML='out' + counter;
    },
    false);
window.addEventListener("mouseover",
    function(e){
        if(mouseIsIn)
            return;
        //do something for mouse over
        counter++;
        mouseIsIn = true;
        document.getElementById('in_out').innerHTML='in' + counter;
    },
    false);
}
</script> 
</head>
<body onload="wireEvent();">
<div id="in_out">&nbsp;</div>
<div style="width:300px; height: 200px; background: red;">Dummy element</div>
</body>
</html>

更新:
追加のチェックマウスの位置 mouseout 起動するときは出要素内です。内であれば、窓 mouseout イベントがトリガされます。
また、フラグの現状とマウス"を"または"out"の利用 mouseIsIn.であれば true, mouseover トリガしません。

おそらくあなたは、マウスオーバーとマウスアウトdocument、bodyまたは文書全体を包み込み、いくつかの他の要素のリスナーを設定し、それがウィンドウ上で有効マウスアウトであるかどうかを判断するためのトリガーとして（それが起こったことを保存することで）それを使うことができますか？

（位置確認については）あなたの最初のアイデアはかなり良い動作するはずです、それに失敗。任意のイベントは、イベントが発生したX / Yに沿って通過します。それは窓の高さ/幅より遠くのものである場合は、実際のウィンドウを残しました。それが負のものである場合は、ウィンドウを残しました。 0または左：それは正確に高さ/幅またはまさにトップであれば、おそらく、0、あなたは、ウィンドウを左

。

マウスがウィンドウを含む任意の要素を、離れたとき、ウィンドウオブジェクトはmouseoutイベントを発生し、それに伴ってeventオブジェクトを通過します。

イベントオブジェクト内の項目の一つは、それが古いものを去ったとき、マウスだけで入力された要素へのポインタであるtoElement、と呼ばれています。しかし、マウスがウィンドウを離れたとき、そのようなtoElementはありませんので、この項目はnullになります。

マウスがウィンドウを残した場合は、

この項目はnullはmouseoutイベントであるかどうかをテストすることによって、あなたが言うことができます。ここでは、コードは次のとおりです。

window.onmouseout=function(event){ 
  if(event.toElement===null) console.log('the mouse left the window'); 
}

あなたの問題は、の内部要素はのために生成されマウスアウトイベント<のhref = "http://www.w3.org/TR/DOMで説明したように、その後のバブルアップウィンドウ、から来ています-Level-2-イベント/ events.html＃イベント・フロー」のrel = "nofollowをnoreferrer"> W3Cのイベントがのスペック。あなたがチェックすることができるイベントが実際に発射された要素：

function mouseoutFunction(event) {
  event = event || window.event;
  var sender = event.srcElement || event.target;
}

ここでは、タイマーに基づいて私の解決策です。ここでのタイマは、基本的mosueが窓の外であることを決定する前に実行するために（具体的には、onmouseover属性）他のイベントハンドラのためにチャンスを与えるために使用されます。 1ミリ秒のタイムアウトが（実際には33msを中心に、最小タイマーの分解能があります）、それはまだしていない場合は、マウスオーバーが発生するために少し時間を与えます。 

var inWin=0;
window.onmouseout = function(e)
{
   inWin--;
   setTimeout(checkIfOut, 1);
}
window.onmouseover = function(e)
{
   inWin++;
}

function checkIfOut()
{
   if(!inWin)
   {
     //Yay! Mouse is out of the window (probably)
   }
}

あなたが代わりにウィンドウ上の onmouseout のイベントを使用することができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top