onclick函数仅显示内容一秒钟的技术问题求助

嘿，这个问题我碰到过！你的确认框一闪就没，核心原因是那个垃圾桶图标被包在了<a>标签里，点击的时候触发了a标签的默认跳转行为——浏览器会尝试跳转到空链接，相当于刷新页面，刚显示的框自然就没啦。下面给你几个靠谱的解决办法：

1. 阻止点击事件的默认跳转行为 #

最简单的方式是在你的display_box函数里添加一行代码，阻止a标签的默认动作：

function display_box(event, element) {
  event.preventDefault(); // 这行是关键！阻止a标签的跳转
  // 你原本用来显示.box的代码，比如：
  const targetBox = element.closest('.roomandtrash').nextElementSibling;
  targetBox.style.display = 'block';
}

如果不想修改JavaScript代码，也可以直接修改<a>标签的href属性，让它不触发跳转：

<figure>
  <a href="javascript:void(0)"> <!-- 把空href改成这个 -->
    <div onmouseover="trash_display(event,this);" onmouseout="trash_out(event,this);" class="roomandtrash">
      <img src="Iconos/bathroom2.png" alt="Bathroom" class="icon" >
      <img src="Iconos/tacho.png" alt="Trash" class="trash_icon" onclick="display_box(event,this);">
    </div>
    <div class="box">
      <h4 class="Messagebox">You are about to delete this room and all its devices. </h4>
      <img src="Iconos/confirm.png"...
    </div>
  </a>
</figure>

2. 排查冲突的鼠标事件 #

另外可以检查一下你的trash_out函数，看看是不是鼠标移出.roomandtrash时，无意中把.box也隐藏了？比如函数里如果有类似element.nextElementSibling.style.display = 'none'的代码，可能会在点击图标后，鼠标不小心移出区域时触发隐藏，这时候需要调整逻辑，确保只有在未触发删除确认时才执行隐藏。

3. 确认.box的初始状态 #

最后别忘了确认你的CSS里，.box默认是隐藏的，这样点击后显示的逻辑才生效：

.box {
  display: none;
  /* 其他样式 */
}

内容的提问来源于stack exchange，提问作者Flama