mouseWheel 事件不起作用 Safari 画布

Question

我正在尝试在 Safari 上处理mouseWheel事件。 您可以在下面看到我的完整功能示例 hmtl5/js 代码，以测试mouseWheel事件。

我的代码在每个mouseWheel事件处跟踪一个矩形，并捕获滚轮事件以定义矩形的大小。

我的问题是我的代码在 Chrome 和 Firefox 浏览器上完美运行。 但是当它在 Safari 浏览器上测试时，轮子的事件不是线性的。 事实上，在 Safari 上，该事件被调用一次，之后没有其他轮事件发送。

 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'); c.addEventListener('mousewheel',function(event){ zoom(event); }); c.addEventListener('Wheel',function(event){ zoom(event); }); function zoom(event){ if( event.deltaY > 0 ) sizeRect -= 10; if( event.deltaY <= 0 )sizeRect += 10; 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(); }

 * { margin:0; padding:0; }

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

Answer 1

您可以使用此方法删除浏览器上的轮子并始终捕获事件。

window.onwheel = function(){ return false; }