实现选择和下拉：触摸事件选择错误的项目答案

【问题标题】：Materialize select and dropdown: Touch event selecting wrong item实现选择和下拉：触摸事件选择错误的项目
【发布时间】：2019-03-21 20:24:32
【问题描述】：

这个错误不仅出现在我的代码中，而且出现在 Materialize 文档站点上，所以我将使用他们的代码作为示例：

<div class="input-field col s12">
<select>
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<label>Materialize Select</label>

这适用于鼠标事件。但是在我的安卓手机屏幕上，无法选择我想要的选项。我要么得到另一个选择，要么没有。该功能按照说明进行初始化，带有

$(document).ready(function(){
$('select').formSelect();

});

您可以在 https://materializecss.com/select.html 的 Materialise 文档中找到该示例，并确认它不起作用。下拉菜单也是如此，如https://materializecss.com/dropdown.html 所示。

我看到 materialize 呈现了上面显示的选择块，但是 materialize js 函数生成了一个额外的 div，其中包含一个 ul 类的“select-wrapper”，然后它作为实际的下拉菜单起作用。选择块本身似乎没有任何功能。可能是 ul 元素对鼠标事件不透明，但对触摸屏上的模拟鼠标事件不透明，这是导致问题的原因吗？但是这种思路让我没有解决办法。

我也按照建议添加 <meta name="viewport" content="width=device-width"> ，但这没有帮助。

我怎样才能让它工作？任何帮助将不胜感激！

【问题讨论】：

标签： materialize

【解决方案1】：

经过几个小时的尝试，我找到了答案：停止在 touchend 事件上传播，特别是

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

感谢您的关注，祝您有愉快的一天。

【讨论】：

有点解决方法，但我确认它有效。感谢您的解决方案！

【解决方案2】：

是的，JRSeabird，它可以工作，但它只解决了 DOMContentLoaded 上的问题。如果你想让它捕捉每一个事件，试试这个

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

【讨论】：

很好的解决方案！谢谢 JRSeabird 和您的解决方案实际上比 select.js 的补丁版本更好！

【解决方案3】：

您应该将“浏览器默认”类添加到选择元素。

当然，这将失去通常的 materializecss 外观，并在该选择元素上提供，也在其他设备上。

一种可能的解决方法是仅在用户浏览器是 safari 时选择性地添加该类。

【讨论】：