jquery - Fastclick 干扰 jQuery mobile 非原生选择

Question

我正在将 Fastclick 与 jQuery Mobile 一起使用，除了一些非 native 选择现在需要两次点击(而不是双击)才能激活之外，它一切正常。

在附加 Fastclick 之前，我将“needsclick”类添加到选择的所有元素中，试图让 Fastclick 忽略选择:

        $("div.ui-select").addClass("needsclick");
        $("#searchPanel .ui-btn-inner").addClass("needsclick");
        $("#searchPanel a").addClass("needsclick");
        $("#searchPanel select").addClass("needsclick");
        bindFastClick();

这在标记中达到了预期的效果，用“needsclick”闪击了整个内容:

<div id="searchPanel">
.....

<a href="#" role="button" id="searchLocationSlct-button" aria-haspopup="true" aria-owns="searchLocationSlct-menu" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" data-inline="true" data-mini="true" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-right needsclick ui-btn-up-c">
     <span class="ui-btn-inner needsclick">
        <span class="ui-btn-text">
             <span class="needsclick">Location</span>
        </span>
        <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
    </span>
</a>
<select name="searchLocationSlct" class="needsclick" id="searchLocationSlct" data-mini="true" data-inline="true" data-shadow="false" data-corners="false" data-native-menu="false" tabindex="-1">
    <option value="Camber Sands"> - Camber Sands</option>
    <option value="Romney Sands"> - Romney Sands</option>
    <option value="Shurland Dale"> - Shurland Dale</option>
</select>

但我仍然需要点击两次(而不是双击)来激活选择。如果我关闭 Fastclick，单击一下即可激活非 native 选择，正如预期的那样。

我用谷歌搜索了这个问题，但找不到任何东西。有人以前见过这个或者有什么想法吗？

Answer 1

似乎当您将 class="needsclick"添加到非 native 选择时，如下所示:

<select name="searchPriceto" id="searchPriceto" data-native-menu="false" class="needsclick">
<option value="">Price to</option>
...

然后类“needsclick”出现在真实选择中(位于屏幕外，隐藏)中，并且仅在假选择按钮的标签文本中呈现:

<span class="needsclick">Price to</span>

如果您的大拇指恰好点击了文本，那么您的非 native 菜单将根据需要首次出现。但是，如果您错过了文本并点击了按钮范围、父 anchor 或任何其他父元素，那么什么也不会发生，直到您重试(出于我不完全清楚的原因)。

我通过在绑定(bind) Fastclick 之前向嵌套中的所有元素添加“needsclick”来修复此问题:

        $("#searchPanel .ui-btn-inner").addClass("needsclick");
        $("#searchPanel .ui-btn-text").addClass("needsclick");
        $("#searchPanel a").addClass("needsclick");
        $("#searchPanel select").addClass("needsclick");

以及在原始选择标记标记中包含 class='needsclick'，如上所示。

在我最初的问题中，我正在寻找正确的树，但我错过了层次结构中的一个元素(#searchPanel .ui-btn-text)，这似乎阻止了修复工作。

我不禁觉得还有比这更好的方法，因为它感觉有点老套，但我想我会与任何有同样问题的人分享。

如果可以使用 jquery 选择器将 Fastclick 仅应用于已识别的元素，那就太好了:)