Question

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

我的代码在每个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; }

js mousewheel事件不工作safari画布

1 个答案: