mouseWheel 事件不起作用 Safari 画布答案

【问题标题】：mouseWheel event not working Safari canvasmouseWheel 事件不起作用 Safari 画布
【发布时间】：2018-05-15 11:30:57
【问题描述】：

我正在尝试处理 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; }

&lt;canvas id="mon_canvas" &gt;&lt;/canvas&gt;

【问题讨论】：

苹果鼠标没有轮子。 ;-)
没错，我用魔术鼠标和触控板进行了测试。我认为这是相同的事件声明。
是的，我的意思是开玩笑。 “;-)”是old-skool emoji。
这是我的第一篇文章或有人提出答案
第一篇文章做得很好。我已经把你的代码变成了一个sn-p，也许它会吸引更多的注意力。

标签： javascript safari dom-events mousewheel

【解决方案1】：

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

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

【讨论】：