Safari浏览器Canvas中mouseWheel事件无法正常触发问题

我来帮你排查并修复这个问题——你的代码在Safari里只触发一次滚轮事件，主要有两个关键原因：

• 事件名称大小写错误：你写的'Wheel'应该是小写的'wheel'，事件名称是大小写敏感的，大写的事件名不会被Safari识别。
• 未阻止默认滚动行为：Safari中，滚轮事件会触发页面的默认滚动操作，这会干扰Canvas的事件监听，导致后续事件无法正常触发。

另外，为了兼容Safari的旧版本，我们可以同时监听标准的wheel事件和Safari特有的mousewheel事件，并且在事件处理函数中阻止默认行为。

下面是修复后的完整可运行代码：

HTML #

<canvas id="mon_canvas"></canvas>

CSS #

* { 
  margin: 0; 
  padding: 0; 
}

JavaScript #

var c = document.getElementById("mon_canvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var width = c.width;
var height = c.height;
var sizeRect = 100.0;

drawRect(width/2 - sizeRect/2, height/2 - sizeRect/2, sizeRect, sizeRect, 'red');

// 监听标准wheel事件和Safari的mousewheel事件，注意事件名小写
c.addEventListener('mousewheel', zoom);
c.addEventListener('wheel', zoom);

function zoom(event) {
  // 阻止默认滚动行为，避免干扰Canvas的事件处理
  event.preventDefault();
  
  if (event.deltaY > 0) {
    sizeRect -= 10;
  } else {
    sizeRect += 10;
  }
  
  // 限制矩形尺寸，避免过小或过大（可选优化）
  sizeRect = Math.max(20, Math.min(width, sizeRect));
  
  drawRect(0, 0, width, height, 'white');
  drawRect(width/2 - sizeRect/2, height/2 - sizeRect/2, sizeRect, sizeRect, 'red');
}

function drawRect(px, py, sizeX, sizeY, color) {
  ctx.beginPath();
  ctx.rect(px, py, sizeX, sizeY);
  ctx.fillStyle = color;
  ctx.fill();
}

关键修复点说明： #

1. 修正事件名称：把'Wheel'改为小写的'wheel'，确保标准事件能被所有浏览器识别。
2. 添加event.preventDefault()：阻止浏览器的默认滚动行为，这样滚轮事件就只会作用在Canvas上，不会触发页面滚动，也就不会干扰后续的事件监听。
3. 可选优化：添加了矩形尺寸的限制，防止矩形变得太小或超出画布范围，提升用户体验。

现在这段代码应该能在Chrome、Firefox和Safari中正常工作，每次滚动滚轮都会实时调整红色矩形的大小。

内容的提问来源于stack exchange，提问作者cconigli