javascript - mouseWheel 事件不工作 Safari Canvas

Question

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

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

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

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