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

Posted 2023-03-28

【中文标题】Wheel 事件不会在 Safari 中的 SVG 组元素上触发

【英文标题】：Wheel event is not fired on a SVG group element in Safari

【发布时间】：2021-08-22 11:42:06

【问题描述】：

我正在尝试使用 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   />

但是，如果我将侦听器绑定到 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   />

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

【问题讨论】：

确认为 webkit 中的 bug (bugs.webkit.org/show_bug.cgi?id=226683#c3)。如果我找到一个好的解决方法或者 webkit 团队有任何更新，我会在这里发布。

【参考方案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   />

【讨论】：

哇，这很有趣！不知道为什么它会神奇地解决问题。您能否在 WebKit 问题跟踪器网站 (bugs.webkit.org/show_bug.cgi?id=226683#c3) 上分享这一发现？这将有助于 WebKit 团队调查此问题。