Question

我正在使用Phonegap和HTML制作移动应用。现在我正在使用谷歌地图/地方自动完成功能。问题是：如果我在我的计算机上的浏览器中运行它一切正常，我选择一个建议使用自动完成列表 - 如果我在我的手机上部署它我仍然得到建议，但我无法点击一个。看起来“建议覆盖”似乎被忽略了，我可以点击页面。是否有可能将重点放在建议列表或某事上？希望可以有人帮帮我。提前谢谢。

Answer 1

确实存在与FastClick和PAC的冲突。我发现我需要将 needsclick 类添加到 pac-item 及其所有子项中。

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

Answer 2

目前github上有pull request，但尚未合并。

但是，您只需使用此patched version快速点击即可。

该补丁添加了excludeNode选项，您可以通过regex排除fastclick处理的DOM节点。这就是我使用它来使用fastclick进行谷歌自动完成功能的方法：

FastClick.attach(document.body, {
  excludeNode: '^pac-'
});

Answer 3

这个回复可能为时已晚。但可能对其他人有帮助。

我有同样的问题，经过几个小时的调试后，我发现这个问题是因为添加了＆＃34; FastClick＆＃34;图书馆。删除后，它照常工作。

因此，对于fastClick和google建议，我已在地理自动填充中添加了此代码

jQuery.fn.addGeoComplete = function(e){
    var input = this;
    $(input).attr("autocomplete" , "off");
    var id = input.attr("id");
    $(input).on("keypress", function(e){
        var input = this;
        var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(37.2555, -121.9245),
          new google.maps.LatLng(37.2555, -121.9245));

        var options = {
            bounds: defaultBounds,
            mapkey: "xxx"
        };

        //Fix for fastclick issue
        var g_autocomplete = $("body > .pac-container").filter(":visible");
        g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
            $(".pac-item", this).addClass("needsclick");
        });
        //End of fix

        autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
         google.maps.event.addListener(autocomplete, 'place_changed', function() {
             //Handle place selection
         });
    });
}

Answer 4

如果您使用的是Framework 7，它有一个FastClicks的自定义实现。 F7没有needsclick类，而是no-fastclick。下面的函数是它在F7中的实现方式：

 function targetNeedsFastClick(el) {
   var $el = $(el);
   if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
   if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
   return true;
 }

正如其他评论中所建议的那样，您只需将.no-fastclick课程添加到.pac-item及其所有儿童

Answer 5

我遇到了同样的问题，我意识到问题是，pac-container的聚焦事件可能发生在pac-item的tap事件之前（仅在phonegap内置浏览器中）。

我能解决这个问题的唯一方法是在聚焦时向输入添加padding-bottom并更改pac-container的top属性，以便pac-container位于输入的边界内。 / p>

因此，当用户点击列表中的项目时，不会触发焦点输出事件。

它很脏，但它有效

Answer 6

对我来说很完美：

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

配置：Cordova / iOS iphone 5

无法点按移动设备上的Google自动填充列表中的商品

6 个答案: