javascript - 检测 `select` 中下拉选项列表的滚动？

Question

我使用的是 Mac，我正在检查系统何时空闲超过 30 秒并且我需要显示警报。但在我的场景中，当用户花费超过 30 秒来浏览选择下拉列表中的选项时，就会触发警报。

我想检测这些选项的滚动。我已经尝试将滚动事件绑定(bind)到页面中存在的 select 元素，直接和通过事件委托(delegate)。我的目标是当我打开一个下拉列表并滚动其中的选项时，系统应该感觉它没有空闲。

这是一个例子:

$(document).on("scroll","select", function(e){
  console.log("You are scrolling through select box options");
});


/*
$('select').scroll(function(e){
  console.log("You are scrolling through select box options");
});
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
</div>

Answer 1

这是一个很好的问题，我花了一些我可能应该多花的时间来试图弄明白。

根据我的研究，这对于默认的 HTML 选择元素不可能，因为选择元素窗口实际上不是页面 DOM 的一部分，而是浏览器的上下文窗口，类似于当您右键单击某物并获得右键单击上下文菜单时。以下是我确定没有您可能希望的选择框上触发的事件的方法。

使用谷歌浏览器，打开开发者控制台并输入:

monitorEvents(document.body);

这会为整个文档打开一个事件观察器，并将记录所有发生的事件。进入选择列表并观察控制台，用鼠标滚动，使用箭头键，滚动工具栏。没有任何反应。

尝试使用 'window' 而不是 'document.body' - 仍然没有。

我还检查了 MDN Web 文档，没有发现任何证据表明要 Hook 此窗口的事件:https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

现在 - 解决您的问题

解决方案 1:

如果您希望能够做到这一点，您需要创建一个自己的选择框，其中可能包含一个可滚动的 div 和可选择的 LI 元素。

解决方案 2:

在您的选择元素上使用 focus() 和 blur() 来判断何时有人选择了它。

var isSelect = false;

$("#selectlist").focus(function() {
console.log("I have focus");
isSelect = true;
})

$("#selectlist").blur(function() {
console.log("I lost focus");
isSelect = false;
})

当列表获得焦点时设置一个变量并且不触发超时。不是 100% 有效，用户可以通过保持选择列表的焦点来绕过超时，但它确实有效。

解决方案 3:

通过给它一个大小使选择选项窗口成为你的 DOM 的一部分。

<select name="optionList" id="optionList" size="3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

然后在“option”元素上监听 mouseenter。

$('select').on('mouseenter', 'option', function(e) {
    console.log(this.value);
});

通过为选择元素指定大小 - 您可以将其保留在页面中，而不是成为与页面分开的 float 窗口。这仅适用于鼠标，但如果您需要移动设备，您也可以添加触摸事件支持。