Question

关于JavaScript范围的问题。我有三个文件（我正在使用Backbone，但我不确定这是否相关）。第一个文件定义了Google地图自定义信息窗口。第二个文件定义了Google Maps标记并将infowindow应用于它。最后，第三个文件将标记和其他页面元素添加到地图中。

我希望第三个文件能够在infowindow上监听鼠标悬停事件，并在其他页面元素发生时调用它们。但是，我的JavaScript不够好，不知道如何：

// InfoWindow.js defines the info window & adds a mouseover event
AI.InfoWindow.prototype = new google.maps.OverlayView;
AI.InfoWindow.prototype.onAdd = function() {
  this.listeners = [
    google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) {
       clearTimeout( window.hidePopupTimeoutId );
    }) ...
  ];
};

// Marker.js defines the map marker and adds the infowindow 
AI.Marker = function() {
  google.maps.Marker.prototype.constructor.apply(this, arguments);
  this.infoWindow = new AI.InfoWindow();
}

// Home.js creates the markers for the map
var myOtherHomePageElement = new AI.OtherHomePageElement();
var marker = new AI.Marker({
   data: entity 
});
// how to listen to infowindow events here?

所以我的问题是：infowindow上的鼠标悬停工作正常，但我希望能够在鼠标悬停时调用myOtherPageElement.start()。如何在Home.js文件中执行此操作？

Answer 1

当发生鼠标悬停时，您可以使用Backbone.trigger和Backbone.on通知Home.js中的对象。

// InfoWindow.js defines the info window & adds a mouseover event
AI.InfoWindow.prototype = new google.maps.OverlayView;
AI.InfoWindow.prototype.onAdd = function() {
  this.listeners = [
    google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) {
       clearTimeout( window.hidePopupTimeoutId );
       Backbone.trigger('infowindow:mouseover', e);
    }) ...
  ];
};

// Marker.js defines the map marker and adds the infowindow 
AI.Marker = function() {
  google.maps.Marker.prototype.constructor.apply(this, arguments);
  this.infoWindow = new AI.InfoWindow();
}

// Home.js creates the markers for the map
var myOtherHomePageElement = new AI.OtherHomePageElement();
var marker = new AI.Marker({
   data: entity 
});
Backbone.on('infowindow:mouseover', myOtherHomePageElement.start, myOtherHomePageElement);

JavaScript范围基础：收听自定义事件？

1 个答案: