当用户单击屏幕上的其他地方时如何隐藏消息

问题描述

我试图让消息在 40 秒无操作后或当用户点击屏幕上的其他地方时消失，但我只设法做到了 40 秒。

我写了这个 PHP，它可以显示不同类型的消息

 <?PHP
     if(isset($_SESSION['message'])): ?>
        <div id="myMsg" class ="alert alert-<?=$_SESSION['type']?>">
            <?PHP
                echo $_SESSION['message'];
                unset($_SESSION['message']);
           ?>
       </div>
    <?PHP endif ?>

这是我写的脚本，这是我必须添加我想要的其他功能

<script type="text/javascript">
 
function timedMsg()
{
var t=setTimeout("document.getElementById('myMsg').style.display='none';",40000);
}
 
</script>   

非常感谢您的时间

解决方法

最好为 setTimeout 使用回调函数。要在点击时隐藏，请使用事件处理程序（最好使用 event delegation），如下所示：

const hideMsg = () => document.querySelector("#msg").classList.add("hide")
document.addEventListener("click",hideMsg);
const to = setTimeout(hideMsg,40000);

.hide {
  display: none;
}

#msg {
  cursor: pointer;
}

<div id="msg">
  Some Message (disappears after 40 seconds),or click anywhere to hide
</div>

,

可以在消息上添加模糊事件监听器
一个例子：

const message = document.querySelector('#myMsg')
message.addEventListener("blur",() => {
  message.style.display='none'
});