鼠标滚轮事件在 Safari 画布上不起作用

Question

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

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

我的问题是我的代码在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; }