实现选择和下拉菜单:触摸事件选择错误的项目 [英] Materialize select and dropdown: Touch event selecting wrong item

问题描述

此错误不仅发生在我的代码中，而且还出现在Materialize文档站点上，因此我将使用他们的代码作为示例:

This bug occurs not just in my code, but also on the Materialize documentation site, so I will use their code as an example:

<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手机屏幕上，无法选择我想要的选项.我要么得到另一个选择，要么都没有.该功能已按照

This works fine with mouse events. But on my android mobile phone screen, it is impossible to select the option I want. I either get another option or none. The feature is initialized as instructed, with

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

})；

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

You can find the example in the Materialize documentation at https://materializecss.com/select.html and confirm that it does not work. The same occurs on dropdowns, as can be seen at https://materializecss.com/dropdown.html.

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

I see that materialize renders the select block shown above, but the materialize js function generates an additional div with class "select-wrapper" containing a ul, which then functions as the actual dropdown. The select block itself seems to serve no function. Could it be that the ul element is opaque to mouse events, but not to the emulated mouse events on touch screens, and that this is causing the problem? But this train of thought led me to no solution.

我也遵循建议添加<元名称="viewport" content ="width = device-width"> ，但这无济于事.

I also followed the suggestion to add <meta name="viewport" content="width=device-width"> , but this does not help.

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

How can I get this to work? Any help will be appreciated!

推荐答案

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

After hours of trying, I found the answer: Stop propagation on touchend event, specifically

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

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

Thanks for your attention and have a nice day.

这篇关于实现选择和下拉菜单:触摸事件选择错误的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！