时间戳

首页 > 解决方案 > 如何让滚动事件通过覆盖而不是单击事件

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

问题描述

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

像这样的东西：

在此处输入图像描述

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

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

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

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

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

你会怎么做？

标签： javascripthtmlcsscanvashtml5-canvas

解决方案

使用 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

推荐阅读