JS MouseWheel событие не работает холст сафари - PullRequest
Новая
       19

JS MouseWheel событие не работает холст сафари

0 голосов
/ 15 мая 2018

Я пытаюсь обработать событие mouseWheel в сафари.Ниже вы можете увидеть мой полный функциональный пример кода hmtl5 / js для тестирования события mousewheel.

Мой код отслеживает прямоугольник при каждом событии mouseWheel, а событие wheel отслеживается, чтобы определить размер прямоугольника.

Моя проблема в том, что мой код отлично работает в браузерах Chrome и Firefox.Но при тестировании на браузере Safari события колеса не отлавливаются линейно.Infact on 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>

1 Ответ

0 голосов
/ 15 мая 2018

Вы можете использовать этот метод, чтобы удалить колесо в браузере и всегда ловить событие. 

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