关于点击页面任意位置弹出消息框，请问如何实现！

问题遇到的现象和发生背景 学习中，想制作一个简单的页面，中间一行文字在屏幕右向左移动，鼠标点击页面任意位置弹出消息框，比如弹出消息框显示‘请勿触碰’，但是这一步不明白怎么实现。
问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>警告</title>
        <style type="text/css">
            p {
                font-size: 150px;
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <marquee>
            <div id="div1">
                <p>请勿触碰键盘鼠标！！！</p>
            </div>
        </marquee>
        <style>
            #div1 {
                width: 400px;
                height: 400px;
                /* 设置容器的宽高 */
                margin: 100px auto;
                /* 使容器水平边距自动相等 */
                /* border: 1px solid red; */
                /* 给文本加上边框可以更清楚地看到效果 */
                line-height: 400px;
                /*设置line-height与rongqi的height相等*/
                text-align: left;
                /*设置文本水平居中*/
                /* overflow: hidden; */
                /*防止内容超出容器或者产生自动换行*/
        </style>
        <style type="text/css">
            body {
                background-color: #000000;
            }
        </style>

    </body>

</html>
运行结果及报错内容 尝试了几次将文字div，对div进行操作，但是无效
我的解答思路和尝试过的方法
我想要达到的结果 请解惑，感谢！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>警告</title>
        <style type="text/css">
              body {
                background-color: #000000;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            p {
                font-size: 150px;
                color: #FF0000;
            }
       
        </style>
    </head>
    <body>
        <marquee onmouseout="start()" >
            <div id="div1" >
                <p>请勿触碰键盘鼠标！！！</p>
            </div>
        </marquee>
 
    </body>
 <script>
     document.addEventListener('click',function(){
        alert('瞎JB点啥')

     })
   
 </script>
</html>