未触发鼠标滚轮事件

Question

我在我的项目中使用Kinetijs并试图使用mousewheel实现缩放。我不知道为什么事件没有被触发。我这样做：

//... a helper object for zooming 
var zoomHelper = { 
    stage: null, 
    scale: 1, 
    zoomFactor: 1.1, 
    origin: { 
     x: 0, 
     y: 0 
    }, 
    zoom: function(event) { 
     event.preventDefault(); 
     var delta; 
     if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { 
      if (event.originalEvent.detail > 0) { 
       //scroll down 
       delta = 0.2; 
      } else { 
       //scroll up 
       delta = 0; 
      } 
     } else { 
      if (event.originalEvent.wheelDelta < 0) { 
       //scroll down 
       delta = 0.2; 
      } else { 
       //scroll up 
       delta = 0; 
      } 
     } 
     var evt = event.originalEvent, 
      mx = evt.clientX - zoomHelper.stage.getX(), 
      my = evt.clientY - zoomHelper.stage.getY(), 
      zoom = (zoomHelper.zoomFactor - delta), 
      newscale = zoomHelper.scale * zoom; 
     zoomHelper.origin.x = mx/zoomHelper.scale + zoomHelper.origin 
      .x - mx/newscale; 
     zoomHelper.origin.y = my/zoomHelper.scale + zoomHelper.origin 
      .y - my/newscale; 
     zoomHelper.stage.setOffset({ 
      x: zoomHelper.origin.x, 
      y: zoomHelper.origin.y 
     }); 
     zoomHelper.stage.setScale({ 
      x: newscale, 
      y: newscale 
     }); 
     zoomHelper.stage.draw(); 
     zoomHelper.scale *= zoom; 
    } 
}; 

$(function() { 
    var width = $(document).width() - 2, 
     height = $(document).height() - 5; 
    var stage = zoomHelper.stage = new Kinetic.Stage({ 
     container: 'container', 
     width: width, 
     height: height, 
     draggable: true 
    }); 
    var layer = new Kinetic.Layer(); 

    var background=new Kinetic.Rect({ 
     x:0, 
     y:0, 
     width: width, 
     height: height, 
     fill:'#E4E4E4' 
    }); 

    var box1 = new Kinetic.Circle({ 
     x: 50, 
     y: 50, 
     radius: 50, 
     fill: '#00D200', 
     stroke: 'black', 
     strokeWidth: 2, 
     draggable: true 
    }); 

    var box2 = new Kinetic.Circle({ 
     x: 150, 
     y: 150, 
     radius: 50, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 2, 
     draggable: true 
    }); 

    // add cursor styling 
    box1.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
    box1.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    // add cursor styling 
    box2.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
    box2.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    layer.add(background); 
    layer.add(box1); 
    layer.add(box2); 
    stage.add(layer); 

    $(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom); 
}); 

我为此创建了fiddle。我不知道出了什么问题。请帮忙。谢谢。

Answer 1

mousewheel事件是non-standard and deprecated。使用wheel事件相反，它会很好地工作：http://jsfiddle.net/Lhru88oq/4/

//... a helper object for zooming 
 
var zoomHelper = { 
 
    stage: null, 
 
    scale: 1, 
 
    zoomFactor: 1.1, 
 
    origin: { 
 
     x: 0, 
 
     y: 0 
 
    }, 
 
    zoom: function(event) { 
 
     event.preventDefault(); 
 
     var delta; 
 
     if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { 
 
      if (event.originalEvent.detail > 0) { 
 
       //scroll down 
 
       delta = 0.2; 
 
      } else { 
 
       //scroll up 
 
       delta = 0; 
 
      } 
 
     } else { 
 
      if (event.originalEvent.wheelDelta < 0) { 
 
       //scroll down 
 
       delta = 0.2; 
 
      } else { 
 
       //scroll up 
 
       delta = 0; 
 
      } 
 
     } 
 
     var evt = event.originalEvent, 
 
      mx = evt.clientX - zoomHelper.stage.getX(), 
 
      my = evt.clientY - zoomHelper.stage.getY(), 
 
      zoom = (zoomHelper.zoomFactor - delta), 
 
      newscale = zoomHelper.scale * zoom; 
 
     zoomHelper.origin.x = mx/zoomHelper.scale + zoomHelper.origin 
 
      .x - mx/newscale; 
 
     zoomHelper.origin.y = my/zoomHelper.scale + zoomHelper.origin 
 
      .y - my/newscale; 
 
     zoomHelper.stage.setOffset({ 
 
      x: zoomHelper.origin.x, 
 
      y: zoomHelper.origin.y 
 
     }); 
 
     zoomHelper.stage.setScale({ 
 
      x: newscale, 
 
      y: newscale 
 
     }); 
 
     zoomHelper.stage.draw(); 
 
     zoomHelper.scale *= zoom; 
 
    } 
 
}; 
 

 
$(function() { 
 
    var width = $(document).width() - 2, 
 
     height = $(document).height() - 5; 
 
    var stage = zoomHelper.stage = new Kinetic.Stage({ 
 
     container: 'container', 
 
     width: width, 
 
     height: height, 
 
     draggable: true 
 
    }); 
 
    var layer = new Kinetic.Layer(); 
 
    
 
    var background=new Kinetic.Rect({ 
 
     x:0, 
 
     y:0, 
 
     width: width, 
 
     height: height, 
 
     fill:'#E4E4E4' 
 
    }); 
 

 
    var box1 = new Kinetic.Circle({ 
 
     x: 50, 
 
     y: 50, 
 
     radius: 50, 
 
     fill: '#00D200', 
 
     stroke: 'black', 
 
     strokeWidth: 2, 
 
     draggable: true 
 
    }); 
 
    
 
    var box2 = new Kinetic.Circle({ 
 
     x: 150, 
 
     y: 150, 
 
     radius: 50, 
 
     fill: 'red', 
 
     stroke: 'black', 
 
     strokeWidth: 2, 
 
     draggable: true 
 
    }); 
 
    
 
    // add cursor styling 
 
    box1.on('mouseover', function() { 
 
     document.body.style.cursor = 'pointer'; 
 
    }); 
 
    box1.on('mouseout', function() { 
 
     document.body.style.cursor = 'default'; 
 
    }); 
 
    
 
    // add cursor styling 
 
    box2.on('mouseover', function() { 
 
     document.body.style.cursor = 'pointer'; 
 
    }); 
 
    box2.on('mouseout', function() { 
 
     document.body.style.cursor = 'default'; 
 
    }); 
 

 
    layer.add(background); 
 
    layer.add(box1); 
 
    layer.add(box2); 
 
    stage.add(layer); 
 

 
    $(stage.content).on('wheel DOMMouseScroll', zoomHelper.zoom); 
 
});

<script type="text/javascript" src="https://rawgit.com/ericdrowell/KineticJS/master/kinetic.js"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<div id="container"></div>

Answer 2

是越来越触发，只是容器引用是错误的。更改

$(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom); 

到

$(stage.container).on('mousewheel DOMMouseScroll', zoomHelper.zoom);