如何获得选择和快速点击以在移动设备上工作

How to get Chosen and FastClick to work on mobile device

本文关键字：移动 工作 选择 何获得      更新时间：2023-09-26

我正在尝试将FastClick添加到已经使用Chosen jQuery插件进行选择的网站。使用 FastClick，选择框只需停止响应移动浏览器上的点击。这也可以通过 Chrome 设备仿真进行复制。

您可以在这个简单的jsFiddle上自己测试：

<select id="foo">
    <option>Bar</option>
    <option>Asdf</option>
</select>
$("#foo").chosen()

使用丁目金丝雀复制的步骤：

  1. 加载 http://fiddle.jshell.net/7ftdo0j3/3/show/
  2. 打开开发人员工具并模拟Google Nexus 7或Apple iPad 1/2（其他工具也可以）
  3. 尝试使用选择。

您遇到的主要问题是您尝试同时使用两个库，它们都奇怪地操作或解释触摸事件。我想使用短语"两者都通过触摸事件做一些黑魔法"，但由于我几乎没有使用相关库的经验，我觉得也许这不合适;)

撇开玩笑不谈，您问题的解决方案是将 FastClick 的 needsclick 类添加到由 selected 动态创建的所有 DOM 元素中：

$("#test").chosen();
$(".chosen-container *").addClass("needsclick");
FastClick.attach(document.body);

至少在我对模拟器的测试中，这似乎有效。我会告诉你为什么我认为它有效。

我注意到当我将needsclick类添加到div.chosen-container及其直接子级时，有时触摸会打开下拉列表，有时不会。当添加到所有孩子时，触摸开始完美地工作。我很确定这样的事情会发生在那里：

  • "选定"可动态创建模仿下拉列表的div元素。
  • 当用户触摸这种div时，原始最顶层元素在鼠标事件中获取存储
    • 例如，如果用户触摸下拉列表的正文（这是一个span元素），则该元素将存储在事件中
  • 快速单击仅从此元素检查needsclick
    • 由于动态创建的元素都没有该魔术类，因此将阻止触摸事件，并将单击事件发送到该元素
  • 否则这将起作用，但似乎 Chosen 根本不侦听点击事件。您可以通过尝试使用 jQuery 将一个发送到.chosen-container来测试这个：

$(".chosen-container").trigger('click');

它不起作用。但是，当您改为发送mousedown事件时，下拉列表会打开：

$(".chosen-container").trigger('mousedown');

这可能意味着，也许在触摸设备上，Selected 已经直接侦听touchstart或touchend事件，这意味着您甚至不需要带有 Selected 下拉列表的 FastClick。不幸的是，我现在没有真正的测试设备，所以我不能保证你的航行有这种幸福的结局:D

我们在一个项目中使用了 Selected，在那里我们也遇到了一些与事件相关的问题。Chosen 的源文件中有很多与事件绑定相关的代码，所以我不得不说我不完全确定那里到底发生了什么。但至少上面的解释在我邪恶的头脑中是有道理的。希望它对您有所帮助，并希望您能再次使用表单。

相关文章：