javascript - 事件在鼠标悬停之前触发，并且由于目标被视为被动而无法阻止被动事件监听器内的默认值

Question

我的以下 JavaScript 代码无法正常工作:

function moveDown(subnavs) {
  const navbar = document.getElementsByClassName('main-navigation')[0]                
  const purpleDiv = document.getElementsByClassName('home-vision')[0] 
  console.log(navbar,subnavs,purpleDiv)

  var x= "250px"  
  purpleDiv.style.marginTop = x
}

(function(){    
  const subnavs = document.getElementsByClassName('sub-menu') 

  for ( let i = 0 ; i <subnavs.length ; i++ ) {
     subnavs[i].addEventListener('mouseover', moveDown(subnavs), {passive:false})
  }
})()

当页面出现时，purpleDiv 立即向下移动 250px。当 subnav 鼠标悬停时，控制台显示由于目标被视为被动，因此无法在被动事件监听器内防止默认。

Answer 1

我不是 100% 清楚您的意图，但在这里我更改了代码以放入分号，以不强制浏览器猜测在哪里插入这些分号，并放入一个函数以允许传递事件和您的其他参数有(不确定这里的意图)，但在添加事件处理程序时调用它可能不是您的意图。

关于您的 preventDefault 注释没有任何线索，因为它不在提供的插图代码中，但我在调用的函数中说明了一些内容。

function moveDown(event, subnavs) {
  const navbar = document.getElementsByClassName('main-navigation')[0];
  const purpleDiv = document.getElementsByClassName('home-vision')[0];
  let defaultWasPrevented = event.defaultPrevented;
  // console.log(event.currentTarget);
  console.log(event.target, defaultWasPrevented);
  event.preventDefault();
  defaultWasPrevented = event.defaultPrevented;
  console.log(defaultWasPrevented);
  // console.log(navbar, subnavs[0], purpleDiv.innerText);
  let x = "100px";
  purpleDiv.style.marginTop = x;
}

(function() {
  const subnavs = document.getElementsByClassName('sub-menu');
  for (let i = 0; i < subnavs.length; i++) {
    subnavs[i].addEventListener('mouseover', function(event) {
      moveDown(event, subnavs);
    }, {
      passive: false
    });
  }
})();

.main-navigation {
  background-color: #FFFFCC;
  border: solid 1px #DDDDDD;
}

.home-vision {
  background-color: #DDAAFF;
  border: solid 1px #DDDDDD;
}

<div class="main-navigation">main
  <div class="sub-menu">Cheers</div>
  <div class="sub-menu">Winner</div>
  <div class="sub-menu">Chicken</div>
  <div class="sub-menu">Dinner</div>
</div>
<div class="home-vision">home vision
  <div class="sub-vision">Guess 0</div>
  <div class="sub-vision">Guess 1</div>
  <div class="sub-vision">Guess 2</div>
  <div class="sub-vision">Guess 3</div>
</div>