鼠标滚轮事件未被触发

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. Use wheel event instead, and it will work fine: 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);

鼠标滚轮事件未被触发

Mouse wheel event in not getting triggered

javascript

jquery

mousewheel

kineticjs

jquery-events