我想允许像在谷歌地图上一样仅使用鼠标滚轮缩放画布(excalidraw API),而无需按 ctrl 键。
这是我尝试过的两件事:
useEffect(() => {
const handleWheel = (event) => {
if (!ctrlSimulate) return;
event.preventDefault();
event.stopPropagation();
const wheelEvent = new WheelEvent("wheel", {
...event,
deltaY:event.deltaY,
ctrlKey: true
});
console.log(event.target)
event.target.dispatchEvent(wheelEvent);
};
if (ctrlSimulate) {
window.addEventListener("wheel", handleWheel);
} else {
window.removeEventListener("wheel", handleWheel);
}
return () => {
window.removeEventListener("wheel", handleWheel);
};
}, [ctrlSimulate]);
或
useEffect(() => {
const handleWheel = (event) => {
if (!ctrlSimulate) return;
event.preventDefault();
event.stopPropagation();
const wheelEvent = new WheelEvent("wheel", {
...event,
deltaY:event.deltaY,
ctrlKey: true
});
console.log(event.target)
event.target.dispatchEvent(wheelEvent);
};
const el = document.querySelector("div")
el.onwheel=handleWheel;
}, [ctrlSimulate]);
它正在缩放,但不完全在我的光标上,这非常令人沮丧,因为我认为它应该 任何帮助表示赞赏!
我很确定这是因为轮子的默认事件正在发生,即使我有一个preventDefault