javascript - Nokia Here 劫持窗口的 DOMMouseScroll 事件

Question

Nokia Here 劫持窗口的 DOMMouseScroll 事件。

我这样注册事件:

window.addEventListener('DOMMouseScroll', 
                        function(){console.log('mouse wheel')}, 
                        true);

但是当在 Here Map 上使用鼠标滚轮时它永远不会被触发。

我的猜测是 Here Map 的 API 在我的处理程序捕获事件之前捕获了事件，然后取消了该事件。

如何处理这种情况？

Answer 1

根据您需要 map 的哪些功能，您可以完全禁用 map 交互或仅禁用鼠标滚动。

选项 1 - 禁用 map 交互

当您创建 map 时，您可以添加组件来指定您想要的功能:

map = new nokia.maps.map.Display(mapContainer, {
  center: [40.664167, -73.838611],
  zoomLevel: 15,
  components: [
    new nokia.maps.map.component.Behavior()
  ]
});

nokia.maps.map.component.Behavior 组件加载默认交互集(zoom.MouseWheel、zoom.DoubleClick、 ETC)。参见 http://developer.here.com/javascript-apis/documentation/maps/topics_api_pub/nokia.maps.map.component.Behavior.html了解更多。

如果您不包含该组件， map 将不会捕获任何这些内容。

选项 2 - 仅禁用 MouseScroll

如果您确实想要一些行为而不是鼠标滚动，您可以加载Behavior 组件，然后删除您不想要的特定行为:

map = new nokia.maps.map.Display(mapContainer, {
  center: [40.664167, -73.838611],
  zoomLevel: 15,
  components: [
    new nokia.maps.map.component.Behavior()
  ]
});

map.removeComponent(map.getComponentById("zoom.MouseWheel"));

这将保留双击缩放、拖动和其他 map 功能，但不会捕获滚动事件。

选项 3 - 自定义缩放鼠标滚轮

如果您需要 map 的缩放滚动功能并且仍然需要 mousescroll 事件，您可以先禁用内置行为(上面的选项 2)，然后实现您自己的滚动监听器:

function zoomMouseWheel(e) {
  var newZoomLevel;
  var toX = e.x;
  var toY = e.y;
  if (e.wheelDelta) {
      newZoomLevel = map.zoomLevel+e.wheelDelta;
  } else if (e.detail) {
      newZoomLevel = map.zoomLevel+(e.detail * -1);
  }
  map.setZoomLevel(newZoomLevel, "default", toX, toY)
};

mapContainer.addEventListener('mousewheel', zoomMouseWheel, true);
mapContainer.addEventListener('DOMMouseScroll', zoomMouseWheel, true);

document.addEventListener('mousewheel', function(){console.log('mouse wheel')}, true);
document.addEventListener('DOMMouseScroll', function(){console.log('mouse wheel')}, true);

注意:在 OS X 上的 Chrome 和 Firefox 中测试，可能需要修改其他浏览器的 wheelDelta 计算