画面外にマウスが行くとポップアップ表示される動作

こちらのサイトのような、画面外にマウスが行くとポップアップ表示される動作をJavaScriptなどで実装したいのですが、どうしたらよいでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

mouseleaveイベントを使うことで質問者さんが実現したいことが行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        html, body {
13            width: 100%;
14            height: 100%;
15        }
16
17        div {
18            width: 200px;
19            height: 200px;
20            background: #f7ecb5;
21        }
22    </style>
23<body>
24<div></div>
25<script>
26    let flag = 0;
27    document.body.addEventListener("mouseleave", () => {
28        if (flag) return false;
29        alert("mouseout");
30        flag = 1;
31    }, false);
32</script>
33</body>
34</html>