7

正如标题所示，我正在使用 JQuery Mobile (1.3.0) 构建一个移动网站，并尝试实施 Google Places Autocomplete (API v3) 以帮助用户输入位置数据。

自动完成功能在桌面设备上正常运行，但在移动设备上使用时不正常（我只在 iOS 6 上测试过）。

在移动设备上使用时，相关位置的下拉列表确实会出现，但是当您按下一个而不在地图上加载选择时就会消失。

我环顾四周，看到了一些可以看到 z-index 的解决方案

.pac 容器

作为罪魁祸首（参见： http: //osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html）。

我已经实施了这些修复，但无济于事，而且我不相信 z-index 是问题所在，因为我可以看到，当在移动设备上按下时，选定的项目确实会更改为它的 :hover 状态/颜色。

如果有人有任何建议，我会全力以赴，如果需要更多详细信息，请告诉我。

4

5 回答 5

11

Saravanan 的回答有点矫枉过正。要解决与 FastClick 和 PAC 的冲突，请将needsclick类添加到pac-item及其所有子项中。

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');
于 2013-11-18T19:53:52.827 回答
4

谢谢丹尼尔。但是我给出的解决方案对性能有一些影响。

我稍微修改了 FastClick 库来实现这一点。

首先，我向 FastClick 构造函数添加了一个参数，其中defaultElCls将是不应该实现 fastclick 的元素。

function FastClick(layer, defaultElCls) {
    'use strict';
    var oldOnClick, self = this;

    this.defaultElCls = defaultElCls;

然后修改needsClick方法：

FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();

if (nodeName === 'button' || nodeName === 'input') {

    // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
    // Don't send a synthetic click to disabled inputs (issue #62)
    if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
        return true;
    }       
} else if (nodeName === 'label' || nodeName === 'video') {
    return true;
}

return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));

};

然后传递pac-item给 FastClick 构造函数

new FastClick(document.body, "pac-item");

希望 FastClick 库也能解决这个问题 :)

于 2013-06-18T18:36:19.280 回答
2

我也遇到了这个错误，并确定 fastclick 是罪魁祸首。我原本打算接受 Devin Smith 的回答，但 epegzz 关于 MutationEvents 被弃用的警告让我想到了MutationObservers，因为我还没有看到涉及它们的修复，所以我想我会分享我的解决方案。

var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
    var self = this;
    mutations.forEach(function(mutation){

        // look for the container being added to the DOM
        var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
        // if it is, begin observing it
        if (pac_container_added){
            var pac_container = mutation.addedNodes[0];
            self.observe(pac_container, observer_config);
        }

        // look for pac-items being added (as children of pac_container)
        // This will not resolve if the observer on pac-container has not been created
        var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
        // when pac items are added, add the needsclick class
        if (pac_item_added) {
            $('.pac-item, .pac-item span').addClass('needsclick')
        }
    });
});
observer.observe(document.body, observer_config);

它比我希望的要复杂，因为我们不能只observer.observe('pac_container')在顶层添加，因为它是异步添加的。幸运的是，该问题的解决方案也是 MutationObservers。

pac_container我们在创建时添加另一个观察者。这样，它会检测到pac-items正在添加的内容，当它们存在时，我们添加needsclick类。

This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.

于 2016-02-03T20:37:48.350 回答
1

fastclick 有一个补丁，可以很好地与 google 地方自动完成功能配合使用。看到这个答案:)

于 2015-05-07T16:49:11.690 回答
0

在拉了很多头发之后，我发现问题出在我添加到项目中的“FastClick”库上。

正如@Saravanan Shanmugam 在此评论中指出的那样https://stackoverflow.com/a/16932543/1177832

FastClick 似乎会干扰自动完成功能。另请参阅上面的链接，了解他添加的解决方法，以使两者发挥得很好。

于 2013-06-18T06:54:11.177 回答