在 Chrome 中单击时选择元素会立即关闭（某些 Android 设备）

Question

我有一个带有选择选项的页面，在某些移动设备（Chrome/Android）上单击时会自动关闭。这个问题不会出现在桌面上，也不会出现在我在 Chrome 中作为移动设备进行调试时。这是一个 Shopify 网站，使用“liquid”语言进行编码，基本上是 html。

经过几天的测试，我发现问题的发生是由于 Facebook Pixels 代码和我的页面存在一些兼容性问题，刷新并关闭了我的选择。之后我尝试了一些 JS 解决方案来阻止此事件的发生，例如 event.preventDefault(); 和 event.stopPropagation()，但没有起作用。

这是我的代码：

<div class="selector-wrapper js product-form__item">
  <label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
  <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
    id="SingleOptionSelector-{{ forloop.index0 }}" data-name="{{ option.name }}" data-index="option{{ forloop.index }}">
    {% for value in option.values %}
    <option value="{{ value | escape }}" {% if option.selected_value==value %} selected="selected" {% endif %}>{{ value
      }}</option>
    {% endfor %}
  </select>
</div>
<script>
document.getElementById('SingleOptionSelector-0').onmouseup=function(e) {e.preventDefault();e.stopPropagation();};
</script>

我已经尝试了一切并用谷歌搜索了几天，但找不到解决方案。有什么想法吗？

感谢您的帮助。

Answer 1

如果它对任何人有帮助：

在带有 WpRocket 和 PixelYourSite 插件的 Wordpress/woocommerce 中：在我们的例子中存在同样的问题，解决方案是将 public.js 排除在延迟 JavaScript 执行之外：pixelyoursite-pro/dist/scripts/public.js

希望能帮助到你，

A