诺基亚在这里劫持窗口的DOMMouseScroll事件

Question

诺基亚在这里劫持窗口的DOMMouseScroll事件。

我注册了这样的事件：

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

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

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

如何应对这种情况？

Answer 1

根据地图所需的功能，您可以完全禁用地图交互，也可以只禁用鼠标滚动。

选项1 - 禁用地图交互

创建地图时，您可以添加组件以指定所需的功能：

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等）。有关详情，请参阅http://developer.here.com/javascript-apis/documentation/maps/topics_api_pub/nokia.maps.map.component.Behavior.html。

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

选项2 - 仅禁用MouseScroll

如果您确实想要某些行为而不是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"));

这样可以双击缩放，拖动和其余的地图功能，但不会捕捉滚动事件。

选项3 - 自定义zoomMouseWheel

如果您需要地图的缩放滚动功能并仍然需要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);

注意：在Chrome＆amp; OS X上的Firefox，可能需要修改其他浏览器的wheelDelta计算