Question

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

您可以通过这个简单的jsFiddle：

自行测试

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

$("#foo").chosen()

与Chome金丝雀一起复制的步骤：

Answer 1

你遇到的主要问题是你试图一起使用两个库，它们都是奇怪地操纵或解释触摸事件。我想使用“与触摸事件一起做一些黑魔法”的短语，但由于我几乎没有使用相关库的经验，我觉得这可能不合适;）

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

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

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

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

选择创建动态div元素，模仿下拉列表。
当用户触摸这种div时，原始的最顶层元素会在鼠标事件中获得存储
- EG。如果用户触摸下拉列表的主要文本（这是span元素），该元素将存储在事件中
FastClick checks needsclick only from this element
- 由于没有任何动态创建的元素具有该魔术类，因此阻止触摸事件并将click事件发送到该元素
否则这会起作用，但似乎Chosen根本不听点击事件。您可以尝试使用jQuery发送一个到.chosen-container来测试这个：

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

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

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

这可能意味着可能在触摸设备上Chosen已经直接侦听touchstart或touchend事件，这意味着即使首先也不需要FastClick和Chosen下拉菜单。不幸的是，我现在没有真正的测试设备，所以我不能保证你航行的这种快乐的结局：D

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