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; }