我的鼠标事件不起作用

我不确定是否使用鼠标事件，因为这是我第一次使用它。我正在试图做的是，如果我将鼠标悬停在我的绘制对象之一，我想显示一个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

我的鼠标事件不起作用

回答

相关问题