可点击的行星答案

【问题标题】：Clicakble planets可点击的行星
【发布时间】：2013-09-16 13:44:35
【问题描述】：

我正在尝试制作在点击时发出警报消息的行星。问题是，据我测试，onmousedown 仅适用于画布。行星代码：

var planets = [];
for (var b=0;b<3;b++) {
planets.push(planet(0,360,Math.random()*600,Math.random()*600));
}

function planet(I,shiips,xpos,ypos){
I = I||{};
I.ships = shiips;
I.x=xpos;
I.y=ypos;
return I;
}

点击检测代码；测试行星物体和图像

update = function(){
planetImage.onmousedown=function(){alert("works!")};
planets[0].onmousedown=function(){alert("works!")};
}
setInterval(update,100);

如果有帮助的话，我正在使用画布绘制图像。我发现以下代码给出了鼠标位置，但它对我不起作用：

(function() {
    var mousePos;

    window.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        mousePos = {
            x: event.clientX,
            y: event.clientY
        };
    }

    function getMousePosition() {
        var pos = mousePos;
        if (!pos) {
            // We haven't seen any movement yet
        }
        else {
            // Use pos.x and pox.y
        }
    }
})();

我尽量保持简单，我不太喜欢 jquery 或任何复杂的东西。再一次：问题是 onmousedown 仅适用于画布对象，即

canvas.onmousedown=function(){alert("works!")};

【问题讨论】：

您是否尝试过将画布的 mouseClick 事件中的鼠标位置与行星的位置进行比较？
“我尽量保持简单，我不太喜欢 jquery 或任何复杂的东西” - 正确使用，jQuery 让事情变得不那么复杂 ，而不是更复杂。 对于某些目的来说，要简单得多。
alert(planets.length); 的结果是什么？
可能是 3，我做了一个初始化，所以在开始时创建了 3 个随机行星

标签： javascript mouse onmousedown

【解决方案1】：

我现在可以使用此代码：

update = function(){
canvas.onmousedown=function(){
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
alert("X position: "+ posX + " Y position: " + posY);
};
setInterval(update,100);

【讨论】：