检测“select"中下拉选项列表的滚动? [英] Detect scroll of dropped-down options list in `select`?
问题描述
我使用的是 Mac，我正在检查系统何时空闲超过 30 秒并且我需要显示警报.但在我的场景中，当用户花费 30 秒以上的时间浏览选择下拉列表中的选项时，警报会被触发.
我想检测这些选项的滚动.我已经尝试将滚动事件直接和通过事件委托绑定到页面中存在的 select 元素.我的目标是，当我打开一个下拉列表并滚动其中的选项时，系统应该感觉它没有闲着.
这是一个例子:
$(document).on("scroll","select", function(e){console.log("您正在滚动选择框选项");});/*$('select').scroll(function(e){console.log("您正在滚动选择框选项");});*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><选择><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option></选择>这是一个很好的问题，我花了一些我可能应该有的时间来试图弄清楚它.
根据我的研究，使用默认的 HTML 选择元素不可能，因为选择元素窗口实际上不是页面 DOM 的一部分，而是浏览器的上下文窗口，类似于当您右键单击某物并获得右键单击上下文菜单时.以下是我确定您可能希望的选择框上没有触发任何事件的方法.
使用谷歌浏览器，打开开发者控制台并输入:
monitorEvents(document.body);这会打开整个文档的事件观察器，并将记录发生的所有事件.进入选择列表并观察控制台，用鼠标滚动，使用箭头键，滚动工具栏.什么都没发生.
尝试使用 'window' 而不是 'document.body' - 仍然没有.
我还检查了 MDN Web Docs，没有发现任何事件的证据可以钩住这个窗口:https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
现在 - 解决您的问题
解决方案 1:
如果您希望能够做到这一点，您需要创建一个您自己的选择框，其中可能包含一个可滚动的 div 和可选择的 LI 元素.
解决方案 2:
在您的选择元素上使用 focus() 和 blur() 来判断某人何时选择了它.
var isSelect = false;$("#selectlist").focus(function() {console.log("我有焦点");isSelect = true;})$("#selectlist").blur(function() {console.log("我失去了焦点");isSelect = false;})在列表聚焦时设置一个变量并且不触发超时.不是 100% 效果，用户可以简单地通过保持选择列表的焦点来解决超时，但它确实有效.
解决方案 3:
通过给它一个大小，使选择选项窗口成为 DOM 的一部分.
然后在选项"元素上监听 mouseenter .
$('select').on('mouseenter', 'option', function(e) {控制台日志(this.value)；});通过为 select 元素指定大小 - 您可以将其保留在页面中，而不是成为与页面分开的浮动窗口.这仅适用于鼠标，但如果您需要移动设备，您也可以添加触摸事件支持.
I am using a Mac, and I am making a check for when the system is idle for more than 30 seconds and I need to show an alert. But in my scenario, when the user takes more than 30 seconds to go through the options in select dropdown, the alert gets fired.
I want to detect scrolling of those options. I've tried binding the scroll event to the select elements present in the page, both directly and through event delegation. My aim is like when I open a dropdownlist and scroll through the options in it, the system should get a feeling like its not idle.
Here's an example:
$(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>
This is a great question, and I spent a little more time that I probably should have, trying to figure it out.
From my research, this is not possible with a default HTML Select Element, because the select element window is not actually part of your page DOM, but rather a context window of the browser, similar to when you right click on something and get the right click context menu. Here is how I determined that there are no events being fired on the select box that you might hope for.
Using Google Chrome, open the developer console and enter this:
monitorEvents(document.body);
This turns on an event watcher for the entire document and will log all events happening. Go into the select list and watch the console, scroll with mouse, use arrow keys, scroll the toolbar. Nothing happens.
Try 'window' instead of 'document.body' - still nothing.
I also checked the MDN Web Docs, and found no evidence of an event to hook for this window: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
NOW - To Solve Your Problem
SOLUTION 1:
If you want to be able to do this, you'll need to create a your own select box, perhaps with a scrollable div and selectable LI elements inside it.
SOLUTION 2:
Use focus() and blur() on your select element to tell when someone has it selected.
var isSelect = false;
$("#selectlist").focus(function() {
console.log("I have focus");
isSelect = true;
})
$("#selectlist").blur(function() {
console.log("I lost focus");
isSelect = false;
})
Set a variable when the list is focused and do not fire the timeout. Not 100% effect, a user could get around the timeout simply by leaving the select list focused, but it does work.
SOLUTION 3:
Make the select option window part of your DOM by giving it a size.
<select name="optionList" id="optionList" size="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
And then listen for mouseenter on the "option" element.
$('select').on('mouseenter', 'option', function(e) {
console.log(this.value);
});
By giving the select element a size - you keep it in the page instead of becoming a floating window separate from your page. This only works for mouse, but you could also probably add touch event support if you needed for mobile.
这篇关于检测“select"中下拉选项列表的滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
