HTML下拉菜单未在iPhone的IOS 13中选择选项

问题描述

我实现了一个Web应用程序，并且该应用程序有一个下拉菜单（即HTML Select）。如果我尝试在下拉菜单中选择任何选项，则它不会触发更改事件，但会成功更新标签文本。

• 设备：iPhone 11或最新版本
• 操作系统：IOS 13或最新版本
• 浏览器：Safari

示例代码：

<select id="storagetype">
    <option value="" selected>Select Storage Type</option>
    <option value="1" selected>ABC</option>
    <option value="2" selected>XYZ</option>
</select>

JavaScript：

var storagetype = document.getElementById("storagetype");

storagetype.addEventListener("change",function() {
    alert(storagetype.value)
});

如果我在IOS 12.X或更低版本中尝试了相同的操作，则其工作符合预期。

此外，没有控制台错误，我尝试了z-index样式。但是什么都没有。

解决方法

在下面的代码中添加过滤器以检测iphone，然后使用它。

JavaScript：

 document.addEventListener('click',function (params) {
 document.querySelectorAll('li[id^="select-options"]').forEach(ele => {
 ele.addEventListener('touchend',(e) => {
 e.stopPropagation();
   })   
  }); 
});

jQuery：

$(document).click(function(){
  $('li[id^="select-options"]').on('touchend',function (e) {
    e.stopPropagation();
  }); 
});