jquery の mouseleave について質問があります。

カーソルがブラウザの外に出たら、アラートを出すとき

$(window).mouseleave(function(){
alert("ウインドウを出ました");
});

この場合、windows IE、Chrome だと
マウスをスクロールバーに乗せた時でもアラートがでてしまいます。

スクロールバー上にマウスがあるときは、
アラートを表示させないためにはどうすれば良いでしょうか？

windows のfirefox
mac の firefox、Chrome、safari ではスクロールバーに乗せてもアラートがでません。

ブラウザの種類に関係なく、ブラウザの外に出たらアラートを出したいのです。

よろしくお願いします！

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/11/11 12:51

こんにちは。

jQueryの問題というよりもブラウザ側の差異のようですね。

通常の要素にスクロールバーを表示する際は、スクロールバーも要素の一部として扱われるようですが、windowの場合だけ特別扱いにしているブラウザがあるようです。
この場合、スクロールバーはdocument外とされてしまうのでスクリプトの及ぶ範囲外となってしまいます。

ご質問の機能を実現する方法として、少々無理やりではありますが、body直下にラッパーのdiv等を置いて、windowにスクロールバーを出させずにこちらの要素でスクロールバーを表示させるようにすれば、ご提示の方法で判定が可能になると推測します。
ただし、ラッパーのサイズが常にwindowと同サイズになるように調整してあげる必要がでてきてしまいますが。


各種のブラウザで確認してはいませんし、自分でもあまりスマートな案だと思えませんので、あくまでもご参考までに・・・
body直下に<div id="wrapper">があるものと仮定して、
$(function(){
　var w = $(window), wrap = $("#wrapper");
　var resize = function(){
　　wrap.css({"width": w.width(), "height": w.height(), "overflow":"auto" });
　}

　$("html").css("overflow", "hidden");
　w.on("resize", resize);
　resize();

　wrap.on("mouseleave", function(){
　　alert("ウインドウを出ました");
　});
});

※あらかじめ、html, body{ margin:0; padding:0; width:100%; height:100%; } などとしておくとよろしいかと。

この回答へのお礼

fujillin さん
ご回答ありがとうございます。
やはりスクロールバーも要素の一部であるか、ないかは直接、解決はできなのですね。

スッキリしました。
仰って頂きました方法を参考にして、やってみます。

お礼日時：2015/11/11 13:45