我的鼠標事件不起作用

我不確定是否使用鼠標事件，因爲這是我第一次使用它。我正在試圖做的是，如果我將鼠標懸停在我的繪製對象之一，我想顯示一個Blurb的說這是哪個城市，人口和他們鬧的圖像等我的鼠標事件不起作用

<script> 
function startCanvas() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    //first circle 
    var one = c.getContext("2d"); 
    //second circle 
    var two = c.getContext("2d"); 
    //third cirle 
    var three = c.getContext("2d"); 
    //fourth circle 
    var four = c.getContext("2d"); 
    //fifth cirle 
    var five = c.getContext("2d"); 
    // new image 
    var image = new Image(); 
    image.onload = function() { 
    ctx.drawImage(image, 69, 50); 
    //draw a circle 
    one.beginPath(); 
    one.arc(180, 90, 10, 0, Math.PI * 2, true); 
    one.closePath(); 
    one.fill(); 
    two.beginPath(); 
    two.arc(155, 138, 10, 0, Math.PI * 2, true); 
    two.closePath(); 
    two.fill(); 
    three.beginPath(); 
    three.arc(160, 180, 10, 0, Math.PI * 2, true); 
    three.closePath(); 
    three.fill(); 
    four.beginPath(); 
    four.arc(257, 210, 10, 0, Math.PI * 2, true); 
    four.closePath(); 
    four.fill(); 
    five.beginPath(); 
    five.arc(238, 235, 10, 0, Math.PI * 2, true); 
    five.closePath(); 
    five.fill(); 
    }; 
    image.src = 'denmark.jpg'; 
    //function hover over circle one, give alert 
    var startlisten = new mouseEvent.Listen({canvas:document.getElementById('myCanvas')}); 
    var circle = new mouseEvent.Register({ 
    type: 'mouseover', 
    name: 'test', 
    x: [180], 
    y: [90], 
    callback: function() { alert('this is a test'); } 
    }); 
    startlisten.add(test); 
} 
</script> 
</head> 
<body onload="startCanvas()"> 
    <canvas id="myCanvas" width="600" height="600";"> 
    Your browser does not support the HTML5 canvas tag. 
    </canvas> 
</body> 
</html>

來源

2013-02-14 Devendra Danny Ramdayal

你使用某種框架或庫嗎？ – Josh 2013-02-14 07:00:45

即時消息不使用任何框架或libraray – 2013-02-14 07:03:21

其中是定義»mouseEvent«的代碼？ – philipp 2013-02-14 07:21:46

你的問題是這樣的代碼：

var startlisten = new mouseEvent.Listen({canvas:document.getElementById('myCanvas')}); 
var circle = new mouseEvent.Register({ 
    type: 'mouseover', 
    name: 'test', 
    x: [180], 
    y: [90], 
    callback: function() { alert('this is a test'); } 
});

這不是原生的JS。試試這個：

c.addEventListener(// Since your code defince `c` as `document.getElementById("myCanvas")` 
    'mouseover', 
    function(e){ 
     e = e || window.event; 
     alert('this is a test'); 
    } 
);

來源

2013-02-14 09:46:34 Cerbrus

如果我使用圓圈，我如何使它工作。它似乎不適合我，我試過這個。 – 2013-02-14 14:46:19

我的鼠標事件不起作用

回答

相關問題