javascript - 附加到 img 时不会在 javascript 中触发 OnClick 事件

Question

我是 JavaScript 的新手，所以这可能是基础...

我正在尝试动态创建图像并将其添加为“onclick”的事件监听器。我将此 img 添加到 div。

我这样创建 img:

function createNewSmiley()
{
    var newSmiley = document.createElement("img");
    newSmiley.src = "./smiley.jpg";
    newSmiley.alt = "Smiley Image";
    newSmiley.style.width = "64px";
    newSmiley.style.height = "64px";
    return newSmiley;
}

然后我将它添加到 div 中，就像这样使用:

function positionNewSmiley(parent, smiley, x, y)
{
    var newSmiley = createNewSmiley();
    newSmiley.style.top = y + "px";
    newSmiley.style.left = x + "px";
    parent.appendChild(newSmiley);
}

这是我的主要功能:

function main(smileyCount)
{
    var myDiv = document.getElementById("myDiv");
    for (var i = 0; i < smileyCount;i++)
    {
        var x = Math.floor((Math.random() * 500));
        var y = Math.floor((Math.random() * 500));
        var smiley = createNewSmiley();
        smiley.onclick = smileyClicked;
        positionNewSmiley(myDiv, smiley, x, y);
    }
}

function smileyClicked(ev) {
    alert("OK");
}

但是 onclick 事件不会触发!

但是，如果我将事件监听器添加到 div - 它会。

我做错了什么？

Answer 1

正如上面评论中提到的，当您必须定位传递的 smiley 时，您正在 positionNewSmiley 中创建新的 smiley :

var smiley = createNewSmiley();
smiley.onclick = smileyClicked;

positionNewSmiley(myDiv, smiley, x, y);
_________________________^^^^^^

只需在位置函数中使用它:

function positionNewSmiley(parent, smiley, x, y)
{
    smiley.style.top = y + "px";
    smiley.style.left = x + "px";

    parent.appendChild(smiley);
}

希望这对您有所帮助。

function createNewSmiley()
{
  var newSmiley = document.createElement("img");
  newSmiley.src = "http://cfile24.uf.tistory.com/image/163BB51F4BF9DF7431AB10";
  newSmiley.alt = "Smiley Image";
  newSmiley.style.width = "64px";
  newSmiley.style.height = "64px";

  return newSmiley;
}


function positionNewSmiley(parent, smiley, x, y)
{
  smiley.style.top = y + "px";
  smiley.style.left = x + "px";

  parent.appendChild(smiley);
}

function main(smileyCount)
{
  var myDiv = document.getElementById("myDiv");

  for (var i = 0; i < smileyCount;i++)
  {
    var x = Math.floor((Math.random() * 500));
    var y = Math.floor((Math.random() * 500));
    var smiley = createNewSmiley();
    smiley.onclick = smileyClicked;
    positionNewSmiley(myDiv, smiley, x, y);
  }
}

function smileyClicked(ev) {
  alert("OK");
}

main(6);

<div id='myDiv'></div>