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);

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

尝试使用“窗口”而不是“ document.body”-仍然没有。

我还检查了MDN Web文档，但没有发现要为此窗口挂起事件的证据：https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

现在-解决您的问题

解决方案1：

如果要执行此操作，则需要创建自己的选择框，也许其中包含可滚动的div和可选择的LI元素。

解决方案2：

在select元素上使用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);
});

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

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

1 个答案: