mouseWheel event not working Safari canvas

Question

I am trying to handle mouseWheel event on Safari. Below you can see my full functional example hmtl5/js code, to test the mouseWheel event.

My code trace a rectangle at each mouseWheel event and the wheel event is caught to define the size of the rectangle.

My problem is my code works perfectly on Chrome and Firefox browser. But when it is tested on Safari browser event of wheel are not linear caught. In fact on Safari the event is called one time and after that there are no other wheel event sent.

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