被动事件监听器答案

【问题标题】：Passive event listeners被动事件监听器
【发布时间】：2018-11-01 04:14:14
【问题描述】：

function loadMenuBasedScript() {}
var getMenuDependentValues="";
window.addEventListener("DOMContentLoaded", function() {
  document.getElementById("selectMenu").onchange = function() {
    menuSelected = this.value;
    loadMenuBasedScript(menuSelected, getMenuDependentValues);
  };
}, false);

<body>
  <div>
    <select id="selectMenu">
      <option value="one">One</option>
      <option value="two">Two</option>
    </select>
  </div>
</body>

如果我单击菜单图标，chrome 会在控制台中显示警告：

[违规] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。见https://www.chromestatus.com/feature/5745543795965952

如何用简单的html 和js 克服？我需要基于所选菜单的value。

【问题讨论】：

github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
什么菜单图标？我必须添加一个函数和一个 var 才能拥有 minimal reproducible example
运行我提供的代码，会出现一个带有One 的框。如果我点击那里（将其更改为two），我会收到警告（在 chrome 的控制台中）。
在选择时遇到同样的问题...您解决了吗？
没有。我尝试了其他浏览器（firefox dev、canary、opera），但它们没有显示该警告。

标签： javascript html

【解决方案1】：

这只是 Chrome 的一个问题。即使只有<select></select> 并且没有事件侦听器也会发生这种情况。每当发生滚动阻止事件时，Chrome 都会自动记录。使用 Chrome 的 DevTools，我检查了选择框上没有鼠标滚轮监听器，它仍然发生。

我建议在控制台中关闭“详细”。

【讨论】：

【解决方案2】：

如果您不需要使用.preventDefault() 或做某事，必须在事件结束之前，您应该使用.addEventListener() 中的passive 选项，它不会阻止事件，而您监听器执行。

所以你的代码看起来像：

function loadMenuBasedScript() {}
var getMenuDependentValues = "";
window.addEventListener("DOMContentLoaded", function() {
  document.getElementById("selectMenu").addEventListener('change', function() {
    menuSelected = this.value;
    loadMenuBasedScript(menuSelected, getMenuDependentValues);
  }, {
    passive: true
  });
}, false);

<body>
  <div>
    <select id="selectMenu">
      <option value="one">One</option>
      <option value="two">Two</option>
    </select>
  </div>
</body>

【讨论】：