代码之家 › 专栏 › 技术社区 › Ilja

如何将单击事件从固定div“转移”到位于固定div后面的画布

canvas html javascript

0

Ilja · 技术社区 · 5 年前

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

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

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

是否有可能采用这种方法,但同时将所有鼠标/触摸事件从div转换为其背后的画布?

0 回复 | 直到 5 年前

1

Anzor Asadov 5 年前

好的,所以你不能通过编程来传递一个点击事件,并且有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和canvas)

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