事件在鼠标悬停之前触发并且由于目标被视为被动而无法在被动事件侦听器中阻止默认

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 鼠标悬停时，控制台显示 Unable to preventDefault inside passive event listener due to target being treated as passive.

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>

事件在鼠标悬停之前触发并且由于目标被视为被动而无法在被动事件侦听器中阻止默认

event fires before mouseover and Unable to preventDefault inside passive event listener due to target being treated as passive

javascript

passive-event-listeners