当用户单击屏幕中的其他位置时如何隐藏消息[重复]

Question

我试图让消息在 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>   

非常感谢您的宝贵时间

Answer 1

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

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

Answer 2

最好为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>