如何用HTML和JS解决Chrome非被动mousewheel事件监听器警告并获取下拉值？

嘿，咱们先搞清楚这个警告的来头：你写的下拉菜单change事件本身不会触发这个警告，大概率是你调用的loadMenuBasedScript函数内部绑定了mousewheel这类滚动事件，而且没给它标记passive属性，浏览器才会弹出这个性能提示——它是在提醒你，这类滚动阻塞的事件监听器如果不声明为被动，可能会拖慢页面滚动的响应速度。

下面给你两个简单的解决思路，既能搞定警告，又能正常获取下拉菜单的选中值：

方案1：规范事件绑定+优化内部滚动事件（推荐） #

先把下拉菜单的事件绑定改成更标准的addEventListener写法，同时确保loadMenuBasedScript里的滚动事件都加上passive: true选项：

完整代码示例 #

JavaScript代码

function loadMenuBasedScript(menuValue) {
  // 这里如果有绑定mousewheel/touchmove这类滚动事件，一定要加passive选项
  // 举个例子：
  // document.addEventListener('mousewheel', function(e) {
  //   // 你的业务逻辑，注意不要在这里调用e.preventDefault()
  // }, { passive: true });
  
  console.log("当前选中的菜单值：", menuValue);
  // 其他依赖菜单值的逻辑写在这里
}

window.addEventListener("DOMContentLoaded", function() {
  const selectMenu = document.getElementById("selectMenu");
  
  selectMenu.addEventListener('change', function() {
    const selectedValue = this.value;
    // 传入选中值到业务函数
    loadMenuBasedScript(selectedValue);
  });
}, false);

HTML代码

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

方案2：直接修复警告根源 #

如果你明确知道是loadMenuBasedScript里的某个滚动事件导致的警告，直接给那个事件监听器加上passive: true就行：

// 比如原来的滚动事件绑定是这样的：
// someElement.addEventListener('mousewheel', yourHandler);
// 改成下面这样：
someElement.addEventListener('mousewheel', yourHandler, { passive: true });

小提示 #

passive: true的作用是告诉浏览器：这个事件监听器不会调用e.preventDefault()来阻止默认的滚动行为，浏览器可以提前优化滚动性能，避免卡顿。所以如果你的滚动事件处理逻辑里不需要阻止默认滚动，一定要加上这个选项。

内容的提问来源于stack exchange，提问作者Dr.PB