Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

如何克服简单的html和js？我需要根据所选菜单value。

Answer 1

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

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

Answer 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>

被动事件监听器

2 个答案: