Wheel 事件不会在 Safari 中的 SVG 组元素上触发

Question

我正在尝试使用 D3 将 wheel 事件侦听器绑定到 SVG 组元素。当我在 Safari 中滚动组元素（组不为空）时，似乎没有触发 wheel 事件。它在 Firefox 或 Chrome 上运行良好。

let svg = d3.select('svg');

let group = svg.append('g')
  .attr('class', 'my-group');

group.on('wheel', (e) => {
  console.log('wheel!');
  e.preventDefault();
});

group.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .style('fill', 'darkorange');

<script src="https://d3js.org/d3.v6.min.js"></script>

<svg width="500" height="900" />

但是，如果我将侦听器绑定到 SVG 元素，则会在 Safari 中触发 wheel 事件。

let svg = d3.select('svg');

let group = svg.append('g')
  .attr('class', 'my-group');

svg.on('wheel', (e) => {
  console.log('wheel!');
  e.preventDefault();
});

group.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .style('fill', 'darkorange');

<script src="https://d3js.org/d3.v6.min.js"></script>

<svg width="500" height="900" />

有没有办法将wheel 事件绑定到单个 SVG 组而不是 Safari 中的整个 SVG 元素？

Answer 1

我加了

d3.select(document.body)
.on('wheel.body', e => {});

在将 wheel 事件绑定到 SVG 元素之前。 这以某种方式解决了问题。

let svg = d3.select('svg');

let group = svg.append('g')
  .attr('class', 'my-group');

d3.select(document.body)
.on('wheel.body', e => {});

group.on('wheel', (e) => {
  console.log('wheel!');
  e.preventDefault();
});

group.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .style('fill', 'darkorange');

<script src="https://d3js.org/d3.v6.min.js"></script>

<svg width="500" height="900" />