Google Maps API Autocomplete 的 pac-container div 上的点击事件答案

【问题标题】：Click event on Google Maps API Autocomplete's pac-container divsGoogle Maps API Autocomplete 的 pac-container div 上的点击事件
【发布时间】：2017-01-09 10:58:38
【问题描述】：

我试图阻止点击事件传播到谷歌地图 API 自动完成的动态创建的 pac-container div 中，但没有成功。已经问过一个类似的问题，但答案对我来说效果不佳。 google places api autocomplete - adding click event

该问题的解决方案说点击事件被自动完成取消，而是使用 mousedown 事件。这在技术上对我有用，但要求我将文档事件从单击更改为鼠标按下，这是我不想做出的牺牲。

我查看了 google maps api 事件，而 Autocomplete 只发出 'place_changed' 事件，所以没有帮助。我的代码在下面的 pac-container div 上停止传播。

var pacContainers = document.getElementsByClassName("pac-container");

angular.forEach(pacContainers, function(value, key) {

    // the click event is cancelled by the Autocomplete instance        
    angular.element(value).on('click', function($event) {

        $event.stopPropagation();

    });

});

【问题讨论】：

标签： javascript angularjs google-maps-api-3

【解决方案1】：

由于您使用的是 Angular，您可以创建一个名为 pacContainer 的指令，并在 forEach 中为链接或控制器中的元素运行代码，它会将 click 事件处理程序与任何 pac-container 上的 stopPropagation 绑定创建时的元素。

【讨论】：

如何在 google map pac-container div 上实例化 pacContainer 指令？由于它们是从 Angular 外部添加的，因此 Angular 在 $compile 中不会知道它们。
另外，如果我能够实例化 pacContainer 指令，我不只是试图操纵谷歌地图自动完成已经“取消”的同一个点击事件吗？
当然，好点。那里同样的问题。我将使用推荐的解决方案添加另一个答案。

【解决方案2】：

之前已经解决了类似的问题，没有使用间隔或超时，而是使用 ng-focus 来表示元素已准备好。

见https://github.com/driftyco/ionic/issues/1798#issuecomment-95943955

pac-container 将在它获得焦点时准备就绪，此时您知道可以附加点击处理程序。

【讨论】：

感谢您的建议。这是使用 setInterval 的一个很好的选择，因为我使用的是 Angular，但是，我问的问题是 click 事件。我仍然遇到同样的点击事件问题。
嗨@DanRichfield 你找到解决这个问题的方法了吗？我可能需要你的帮助来解决这个问题。
@CrazyGeek 我只是硬着头皮使用了 mousedown 事件。一切正常。