如何在手机上收听 select 的打开和关闭事件？

Question

我知道select在打开/关闭时不存在本机事件。 我正在使用此答案中建议的select.mousedown和document.mouseup ，它们在桌面上运行良好。 但是，它们在移动设备上无法按预期工作 - 打开select时， select.mousedown和document.mouseup select.mousedown触发，关闭时不会触发。

这是代码（和jsfiddle ） - 要重现该问题，请打开 devtools 然后打开设备模拟器（例如 iPhone 6）：

 const select = document.getElementById("select") select.addEventListener('mousedown', e => { console.log('select mousedown') }) document.addEventListener('mouseup', e => { console.log('document mouseup') })

 <select id="select"> <option value="1" data-label="One">1</option> <option value="2" data-label="Two">2</option> <option value="3" data-label="Three">3</option> <option value="4" data-label="Four">4</option> </select>

我也尝试了其他事件，试图捕捉select关闭的时刻 - select.blur ， document.click ， select.mouseleave等 - 但没有一个正在触发移动。 这是一个更广泛的 jsfiddle - 打开设备模拟器，打开 select 框，然后关闭它（单击离开或在框本身上） - 没有事件触发。

我还尝试用不可见的叠加层覆盖页面 - 问题是我似乎无法将点击事件从叠加层“涓涓”到select （我尝试document.elementFromPoint(e.clientX, e.clientY).click()在overlay.click中），或者如果我应用pointer-events: none那么覆盖不会收到点击，只有select会收到。

有什么方法可以在手机上收听select打开/关闭事件？ 谢谢

Answer 1

不幸的是，没有 select 打开和关闭的标准事件

一种方法是构建一个自定义下拉列表，就像 bootstrap https://getbootstrap.com/docs/4.0/components/dropdowns/#events建议的那样，当组件打开或关闭时，组件会触发更多事件

• show.bs.dropdown：该事件在调用 show 实例方法时立即触发。
• shown.bs.dropdown：当下拉菜单对用户可见时触发此事件（将等待 CSS 转换完成）。
• hide.bs.dropdown：当调用 hide 实例方法时立即触发此事件。
• hidden.bs.dropdown：当下拉菜单完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。

代码来自文档

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Answer 2

这些是实现所需行为所需的事件。

 const select = document.getElementById("select") select.addEventListener('focusin', e => { console.log('using select') }) document.addEventListener('focusout', e => { console.log('no longer working on select') }) document.addEventListener('change', e => { console.log('chose a value') })

 <select id="select"> <option value="1" data-label="One">1</option> <option value="2" data-label="Two">2</option> <option value="3" data-label="Three">3</option> <option value="4" data-label="Four">4</option> </select>