javascript - 如何让 Chosen 和 FastClick 在移动设备上工作

Question

我正在尝试添加 FastClick到一个已经使用 Chosen 的网站用于选择的 jQuery 插件。使用 FastClick，选择框可以简单地停止响应移动浏览器上的点击。这也可以通过 Chrome 设备模拟进行复制。

您可以在这个简单的 jsFiddle 上自行测试:

<select id="foo">
    <option>Bar</option>
    <option>Asdf</option>
</select>

$("#foo").chosen()

使用 Chome Canary 进行复制的步骤:

1. 加载http://fiddle.jshell.net/7ftdo0j3/3/show/
2. 打开开发者工具并模拟 Google Nexus 7 或 Apple iPad 1/2(其他也可能有效)
3. 尝试使用选择。

Answer 1

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

开个玩笑，您的问题的解决方案是将 FastClick 的 needsclick 类添加到由 chosen 动态创建的所有 DOM 元素:

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

至少在我使用模拟器进行的测试中，这似乎是可行的。我会告诉你为什么我认为它有效。

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

• Chosen 动态创建模拟下拉列表的 div 元素。
• 当用户触摸这种div时，原始最顶层元素会存储在鼠标事件中
  • 例如。如果用户触摸下拉列表的主要文本(这是一个 span 元素)，该元素将存储在事件中
• FastClick checks needsclick only from this element
  • 由于所有动态创建的元素都没有该魔法类，因此触摸事件被阻止，而是将点击事件发送到该元素
• 否则这会起作用，但似乎 Chosen 根本不监听点击事件。您可以通过尝试使用 jQuery 将一个发送到 .chosen-container 来测试它:

$(".chosen-container").trigger('点击');

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

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

这可能意味着，也许在触摸设备上，Chosen 已经直接监听了 touchstart 或 touchend 事件，这意味着即使在第一名。不幸的是，我现在没有真正的测试设备，所以我不能保证你的航程会有这样的幸福结局:D

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