2015-09-04 7 views
3

В настоящее время я играю с KonvaJS. Я установил прослушиватель событий click на shape. Когда я нажимаю на shape, вызывается прослушиватель. В моем слушателе я вызываю метод event.preventDefault(), чтобы остановить запуск других событий. Но когда я это делаю, это говорит о том, что Uncaught TypeError: event.preventDefault is not a function. Я не знаю, чего мне не хватает. Вот мой code:KonvaJS: event.preventDefault не является функцией

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://cdn.rawgit.com/konvajs/konva/0.9.5/konva.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Konva Scale Animation Demo</title> 
    <style> 
    body { 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #F0F0F0; 
    } 
    </style> 
</head> 

<body> 
    <div id="container"></div> 
    <script> 
    var width = window.innerWidth; 
    var height = window.innerHeight; 

    var stage = new Konva.Stage({ 
     container: 'container', 
     width: width, 
     height: height 
    }); 

    var layer = new Konva.Layer(); 

    stage.add(layer); 

    var gArrow2 = new Image(); 
    var circle2 = new Konva.Image({ 

     x: 60, //on canvas 
     y: 60, 
     image: gArrow2, 
     name: 'abc', 
     id: 'xyz', 
     draggable:true 
     }); 
     circle2.on('click',function(event){ 
     event.preventDefault() 
     console.log(e.type); 
     }); 
     circle2.on('mouseup',function(event){ 
     event.preventDefault() 
     console.log(e.type); 
     }); 
    gArrow2.onload = function() { 

     layer.add(circle2); 
     layer.draw(); 
    } 
    gArrow2.src = 'http://konvajs.github.io/assets/snake.png'; 

    var period = 1500; 
    var amplitude = 10; 
    var centerX = stage.getWidth()/2; 
    var centerY = stage.getHeight()/2; 

    var anim = new Konva.Animation(function(frame) { 
     circle2.setY(amplitude * Math.sin(frame.time * 2 * Math.PI/period) + centerY); 
    }, layer); 

    anim.start(); 
    </script> 

</body> 

</html> 

ответ

5

кажется, что on обработчик KonvaJS не дает вам непосредственно события браузера, но объект, который выглядит как: enter image description here.

Оригинальное событие браузера хранится в собственности evt.

В вашем коде, попробуйте заменить event.preventDefault() на event.evt.preventDefault(): http://plnkr.co/edit/tCESd42r67TzeuLiISxU.

+0

Вы пригвоздили его к брату. Благодарю. Могу ли я остановить запуск события mouseup, когда пользователь нажимает на фигуру? –

+0

Если вы хотите удалить операции по умолчанию по щелчку, достаточно предотвратить событие click. Не нужно также вызывать 'preventDefault' на' mouseup'. –

+0

Получил благодарность брату. :) –

0

Если вы хотите, чтобы другие события не срабатывать тогда KonvaJS имеет свойство cancelBubble для event, которые вы можете установить в true. При использовании этой необходимости не нужно искать функцию event.preventDefault(). Вот вам пример plunkr.

triangle.on('mouseup', function(e) { 
     e.cancelBubble = true; 
     console.log('Triangle mouse up'); 
    }); 
+0

Спасибо, я уже начал использовать его. :) –