简单而愚蠢的onmouseout前夕答案

【问题标题】：simple and stupid onmouseout eve简单而愚蠢的onmouseout前夕
【发布时间】：2021-09-05 11:11:43
【问题描述】：

好的，这就是问题所在。

<div class="left">
</div>
<div class="right" onmouseout="this.innerHTML='';">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

好的，所以这一切都很好，当我将鼠标从右侧 div 移动到左侧时，元素会自行隐藏。问题是当我在里面的各种 div 之间移动时它也会隐藏起来。我需要让用户在右侧 div 周围导航，然后在将鼠标移动到左侧 div 时让它消失。

另一个问题是我不能在这个项目上使用 jquery，必须在纯 vanilla js 中完成。 DOM真的没有办法处理这种事件吗？

【问题讨论】：

“真的没有办法吗” - 如果用jQuery可以做到，那么用JS也可以。

标签： javascript html css dom

【解决方案1】：

正如其他人所指出的，要使用的正确事件是 mouseleave，因为正如文档所述：

mouseleave 和 mouseout 相似，但区别在于 mouseleave 不是冒泡和鼠标移出。这意味着 mouseleave 被触发时指针已退出元素及其所有后代，而当指针离开元素或离开其中之一时触发 mouseout 元素的后代（即使指针仍在元素）。

另外，you should not be using inline HTML event attributes to set up your events。相反，请遵循现代标准并将您的事件处理代码与 HTML 分开。

而且，要隐藏一个元素，您不应该删除它的内容。相反，从字面上隐藏元素，这可以通过 CSS 使用 display:none、visibility:hidden 或 opacity:0 来完成。

document.querySelector("div.right").addEventListener("mouseleave", function(event){
  this.classList.add("hidden");
});

.right { background-color:yellow; }
.hidden { display:none; }

<div class="left">
</div>
<div class="right">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

【讨论】：

【解决方案2】：

您想使用onmouseleave 而不是onmouseout

Mouse Out 分别为每个子元素触发，鼠标离开 set 元素时离开。

【讨论】：

不知道 mouseleave 是什么东西。谢谢，现在完美运行

【解决方案3】：

您可以在 Javascript 中通过 mouseleave 事件实现此目的。作为内联事件侦听器，它将是：

<div class="right" onmouseleave="this.innerHTML = '';">

工作示例：

.right {
  width: 50px;
  background-color: yellow;
}

<div class="right" onmouseleave="this.innerHTML = '';">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

但最好将 JavaScript 和 HTML 分开。所以它会在 JavaScript 中：

document.querySelector('.right').addEventListener('mouseleave', function() {
    this.innerHTML = '';
});

工作示例：

document.querySelector('.right').addEventListener('mouseleave', function() {
  this.innerHTML = '';
});

.right {
  width: 50px;
  background-color: yellow;
}

<div class="right">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

【讨论】：