检测“select”中下拉选项列表的滚动？

Question

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

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

下面是一个例子：

$(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 的一部分，而是浏览器的上下文窗口，类似于右键单击某物并获得正确的结果单击上下文菜单。以下是我如何确定您可能希望的选择框上没有触发任何事件的方法。

使用 Google Chrome，打开开发者控制台并输入：

monitorEvents(document.body);

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

尝试“window”而不是“document.body” - 仍然没有任何结果。

我还检查了 MDN Web 文档，没有发现任何可以挂钩此窗口的事件的证据： 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);
});

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