Question

此错误不仅发生在我的代码中，而且还出现在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>

这与鼠标事件很好用。但是在我的Android手机屏幕上，无法选择我想要的选项。我要么得到另一个选择，要么都不选择。该功能按照

的说明进行了初始化

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

}）；

您可以在https://materializecss.com/select.html的Materialize文档中找到示例，并确认该示例不起作用。在下拉列表中也会发生同样的情况，如https://materializecss.com/dropdown.html所示。

我看到materialize渲染了上面显示的select块，但是materialize js函数生成了一个附加的div，该div的类包含一个包含ul的“ select-wrapper”类，然后用作实际下拉列表。选择块本身似乎不起作用。可能是ul元素对鼠标事件是不透明的，但对触摸屏上的模拟鼠标事件却不透明，这是否引起了问题？但是这种思路导致我无解。

我也遵循建议添加<meta name="viewport" content="width=device-width">，但这无济于事。

我该如何使用它？任何帮助将不胜感激！

Answer 1

是的，JRSeabird，它可以工作，但是只能解决DOMContentLoaded上的问题。如果您希望它捕获每个事件，请尝试

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

Answer 2

经过数小时的尝试，我找到了答案：尤其是在touchend事件上停止传播

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

感谢您的关注，并祝您愉快。

Answer 3

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

当然，这将使通常的Materializecss外观松动，并在其他设备上以该选择元素为食。

可能的解决方法是仅在用户浏览器为野生动物园时有选择地添加该类。

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

3 个答案: