如何让滚动事件通过覆盖而不是单击事件答案

【问题标题】：How to let scroll events through an overlay but not click events如何让滚动事件通过覆盖而不是单击事件
【发布时间】：2021-05-06 16:43:21
【问题描述】：

我想创建一个带有自定义控件的地图注释工具（不使用地图提供者的内置注释功能）。

类似这样的：

我的想法是在地图上方覆盖一个画布。

问题是：由于该叠加层，我无法再通过滚动来放大地图。

如果我在画布上设置pointer-events: none，那么我就不能再在画布上画画了。

演示：https://codepen.io/vandrieu/pen/qBqdpzX?editors=1010

我希望能够在画布上绘图，同时仍然能够通过滚动鼠标来缩放地图。

你会怎么做？

【问题讨论】：

我想说只是创建一个按钮来在移动和绘图之间切换。
您可以在画布上添加一个scroll 事件，将scroll 发送到地图。
@Rojo 你能给我一个关于如何将事件发送到另一个元素的提示吗？我不知道该怎么做。
@Rojo PS：我找到了方法。使用事件分派。不幸的是，将wheel 事件发送到地图元素不起作用。地图不缩放。
@Rojo 我成功了，这要感谢你。谢谢

标签： javascript html css canvas html5-canvas

【解决方案1】：

使用 Rojo 的评论，我开始研究事件分派，并编写了这个将事件分派给另一个的方法

function redirectEvent(eventType, fromElementSelector, toElementSelector) {
  const fromElement=document.querySelector(fromElementSelector)
  const toElement=document.querySelector(toElementSelector)
  fromElement.addEventListener(eventType, function (event) {
    toElement.dispatchEvent(new event.constructor(event.type, event));
    event.preventDefault();
    event.stopPropagation();
    //event.stopImmediatePropagation();
  });
}

然后我挣扎，

首先是因为scroll 事件不起作用。直到我发现正确的事件不是scroll，而是wheel。

然后因为以这种方式调度事件： redirectEvent("wheel", '#canvas2', '#map2') 没用。我想也许我需要将事件发送到地图内的画布（地图是使用画布呈现的）。

所以我改为： redirectEvent("wheel", '#canvas2', '#map2 canvas') 但它也没有工作。

原因是页面加载时，地图里面的画布还没有渲染出来。

但如果我等一下：

setTimeout(() => {
redirectEvent("wheel", '#canvas2', '#map2 canvas')   
},2000)

有效！

查看更新后的演示（地图编号 2）：https://codepen.io/vandrieu/pen/qBqdpzX?editors=1010

【讨论】：