FF 响应式设计模式选择下拉菜单答案

【问题标题】：FF Responsive Design Mode Select DropdownFF 响应式设计模式选择下拉菜单
【发布时间】：2018-07-11 09:04:42
【问题描述】：

我在 Firefox（61.0.1 64 位 MacOS，但也适用于 Windows 和更早版本）的响应式设计模式中打开选择下拉菜单时遇到问题。

采取以下简单的选择：

<select> 
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
</select>

在 chrome 的响应式设计模式（设备工具栏/移动模拟器）中，点击选择会打开下拉列表，但在 Firefox 的响应式设计模式下（按 crtl+shift+M，在顶部选择模型，请确保手突出显示为蓝色 == 启用触摸模拟），它不起作用，触发了触摸事件，但下拉菜单未打开。

我添加了一个console.log 来查看是否发出了tapEvent，它是。 Codepen exemple

<select onTouchStart=console.log(this)> 
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
</select>

然后我将 console.log 更改为警报，非常奇怪的是，在 FF 中这会打开下拉列表，在 chrome 中它会按预期“提醒”选择。 Codepen exepmle

<select onTouchStart=alert(this)> 
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
</select>

我错过了什么还是 FF 触摸模拟器中的错误？

P.S.：我只是在真机上测试了firefox能不能用，没问题，好像只是他们的模拟器。

【问题讨论】：

【解决方案1】：

这绝对是 Firefox 的响应模式的问题，尤其是触摸模拟器。如果你使用alert而不是console.log，它似乎工作的原因是alert实际上导致代码在这里抛出异常：

因为touch 是未定义的，因此代码不会继续，下拉菜单会打开。

如果还不存在，则应将其作为 bug 添加到 bugzilla 中，以便在即将发布的 Firefox 版本中修复。

【讨论】：