Dies ist ein großes Stück Code, aber wenn Sie mich frönen:Warum sind keine Ereignisse Maus arbeiten
<html>
<head>
<style>
.mobile {position: absolute;}
</style>
<script>
var images = new Array();
image['Key1']='image1.png';
image['Key2']='image2.png';
image['Key3']='image3.png';
image['Key4']='image4.png';
image['Key5']='image5.png';
function createAll()
{
tag = document.getElementById("canvas");
for(var key in image)
{
var r = key;
while(r.indexOf('_')>-1)
{
r=r.replace('_',' ');
}
let t = document.createElement("p");
t.id=r;
t.className="mobile"
t.xVel = Math.floor(Math.random()*50-25);
t.yVel = Math.floor(Math.random()*50-25);
t.xPos = Math.floor(Math.random()*1000)-60;
t.style.left= t.xPos;
t.onclick="clickTag('"+r+"')";
t.yPos=Math.floor(Math.random()*600)-42;
////THIS IS WHERE THE EVENT IS ADDED////
t.addEventListener("onmousedown", function(){clickTag(t);});
////THIS IS WHERE THE EVENT IS ADDED////
t.style.top=t.yPos;
var i = document.createElement("img");
i.src=image[key];
var s = document.createElement("span");
tag.appendChild(t);
t.appendChild(i);
t.appendChild(s);
setTimeout(function() {step(t);},200);
}
}
function restartMe(tag)
{
var x = Math.floor(Math.random()*1000);
var y = Math.floor(Math.random()*600);
var xVel = Math.floor(Math.random()*50-25);
var yVel = Math.floor(Math.random()*50-25);
var r = Math.random();
if(r<.25)//left wall
{
x=-59;
xVel = Math.floor(Math.random()*10);
}
else if(r<.5)//right wall
{
x=1059;
xVel = -Math.floor(Math.random()*10);
}
else if(r<.75)//top wall
{
y=-41;
yVel = Math.floor(Math.random()*10);
}
else//bottom wall
{
y=641;
yVel = -Math.floor(Math.random()*10);
}
tag.xPos = x;
tag.style.left=x;
tag.yPos = y;
tag.style.top=y;
tag.style.xVel=xVel;
tag.style.yVel=yVel;
let t = tag;
setTimeout(function() {step(t);},200);
}
function step(tag)
{
var x = tag.xPos;
var y = tag.yPos;
var dx = tag.xVel;
var dy = tag.yVel;
x+=dx;
y+=dy;
let t = tag;
if(x<-60 || x>1060 || y<-42 || y>642)
{
x=-500;
y=-500;
tag.xPos=x;
tag.yPos=y;
tag.style.left=x;
tag.style.top=y;
setTimeout(function() {restartMe(t);},1000);
return;
}
tag.xPos=x;
tag.yPos=y;
tag.style.left=x;
tag.style.top=y;
setTimeout(function() {step(t);},200);
}
function startGame()
{
var tag = document.getElementById("game");
target = Object.keys(image)[Math.floor(Math.random()*Object.keys(image).length)];
var r = target;
while(r.indexOf('_')>-1)
{
r=r.replace('_',' ');
}
target=r;
tag.innerHTML="Look for the "+target;
}
function clickTag(id)
{
////HERE IS WHERE THE MOUSE EVENT SHOULD EXECUTE////
if(id===target)
{
startGame();
}
var tag = document.getElementById("output");
tag.innerHTML="No, that is the "+id;
}
</script>
</head>
<body onload="createAll();startGame()">
<h2>What do you see?</h2>
<p id="game"></p>
<p id="output"></p>
<p id="canvas" class="black" width="1000" height="600"></p>
</body>
</html>
Okay, hier ist die Sicht nach unten. Ich beginne mit mehreren Bilddateinamen in einem Array mit einem Schlüssel, der das Bild identifiziert. Wenn die Seite geladen wird, gehe ich durch den Prozess des Erstellens einer Menge beweglicher p-Tags, die das Bild und ein Klickereignis enthalten. Für jedes dieser Tags gibt es ein Timeout, und dann bewegen sie sich über den Bildschirm. Wenn einer von ihnen eine Grenze erreicht, wartet er eine Sekunde und beginnt dann erneut an einem der Ränder. Dieser Teil funktioniert gut, aber das Mausereignis nicht.
Ich suche nach einem Mausereignis, wenn ich auf eines dieser Dinge klicke, aber nichts passiert. Ich habe versucht, das Ereignis auf das p und das img zu setzen. Ich habe Variationen von onmousedown, onmouseup, onclick usw. versucht, und nichts scheint zu arbeiten. Vermutlich vermisse ich etwas Offensichtliches, also würde ich ein zweites Auge zu schätzen wissen.
becuase addEventListener verwendet nicht "on" in den Ereignisnamen – epascarello