2015-09-04 82 views
3

現在我在玩KonvaJS。我在shape上設置了一個click事件監聽器。當我點擊shape時,偵聽器被調用。在我的聽衆中,我調用了event.preventDefault()方法來停止觸發其他事件。但是當我這樣做時,它說Uncaught TypeError: event.preventDefault is not a function。我不知道我錯過了什麼。這裏是我的codeKonvaJS: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

似乎KonvaJS的on處理程序不給你直接在瀏覽器的事件,而是一個對象,它看起來像:enter image description here

瀏覽器的原始事件存儲在evt屬性中。

在您的代碼中,嘗試用event.evt.preventDefault()替代event.preventDefault()http://plnkr.co/edit/tCESd42r67TzeuLiISxU

+0

你釘了它的兄弟。謝謝。當用戶點擊形狀時,我可以停止觸發'mouseup'事件嗎? –

+0

如果您想在點擊時刪除默認操作,阻止點擊事件就足夠了。無需在'mouseup'上調用'preventDefault'。 –

+0

感謝兄弟。 :) –

0

如果您不想觸發其他事件,則KonvaJS有一個名爲cancelBubble的房產,用於event,您可以將其設置爲true。通過使用這個不需要尋找event.preventDefault()函數。以下是plunkr的演示。

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

謝謝我已經開始使用它。 :) –