时间戳

首页 > 解决方案 > 如何“点击”固定覆盖 div，而不禁用其指针事件

javascript - 如何“点击”固定覆盖 div，而不禁用其指针事件

问题描述

我有一个用例，我需要在画布元素上覆盖固定的 div。此 div 用于侦听滚动事件，然后将该数据传输到它所覆盖的画布。这些的简化 html 可能如下所示：

<canvas style="width: 100vw; height: 100vh;"></canvas>
<div style="position: fixed; width: 100vw; height: 100vh; top: 0; left: 0;"></div>

我遇到了一个问题。我的画布也是交互式的，它有按钮元素和其他类似的东西，不幸的是我不得不以这种方式实现滚动行为以获得更好的性能并在 ios 上保持默认浏览器行为，如“反弹滚动”。

是否有可能采用这种方法，但也可以将所有鼠标/触摸事件从 div 转换为它后面的画布？

标签： javascripthtmlcanvas

解决方案

好的，所以您不能真正以编程方式传递单击事件并具有 x 和 y 坐标（如我附加的小提琴中所示）。

您可以做的是定义在单击 div 时存储 x 和 y 坐标的全局变量。然后像这样在画布上触发点击：

var div = document.querySelector('#theDiv')
var canvas = document.querySelector('#theCanvas')
var x = 0;
var y = 0;

div.addEventListener('click', function(event) { 
  console.log('div clicked', event); // event.clientX and event.clientY have correct values
  x = event.clientX;
  y = event.clientY;
  canvas.click();
});

canvas.addEventListener('click', function(event) {
  console.log('canvas clicked', x, y, event); // event.clientX and event.clientY are both 0
})

这是小提琴，您可以在其中看到它的实际效果（我添加了一些样式来区分 div 和画布）

https://jsfiddle.net/m1n4xave/10/

推荐阅读