☰

マウスがウィンドウから離れたことを検出するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript browser mouse
マウスがウィンドウから離れたことを検出するにはどうすればよいですか? 質問する

マウスがウィンドウから離れたことを検出できるようにして、ユーザーのマウスが他の場所にある間はイベントの発生を停止できるようにしたいと考えています。

これを実行する方法について何かアイデアはありますか?

ベストアンサー1

私の回答はかなり古くなっていることをご留意ください。

このタイプの動作は、通常、HTML ページでドラッグ アンド ドロップ動作を実装するときに必要になります。以下のソリューションは、MS Windows XP マシン上の IE 8.0.6、FireFox 3.6.6、Opera 10.53、および Safari 4 でテストされました。
まず、Peter-Paul Koch による小さな関数、クロス ブラウザー イベント ハンドラーです。

function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

次に、このメソッドを使用して、ドキュメント オブジェクトの mouseout イベントにイベント ハンドラーをアタッチします。

addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

最後に、デバッグ用にスクリプトが埋め込まれた HTML ページを次に示します。

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            alert("left window");
        }
    });
});
</script>
</head>
<body></body>
</html>

おすすめ記事