附加到 img 时未在 javascript 中触发 OnClick 事件答案

【问题标题】：OnClick event not fired in javascript when attached to img附加到 img 时未在 javascript 中触发 OnClick 事件
【发布时间】：2016-10-21 23:49:56
【问题描述】：

我是 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 - 它会。

我做错了什么？

【问题讨论】：

positionNewSmiley() 创建一个新对象（没有点击处理程序），并且仅将那个对象添加到文档中。
我怎么会错过这个？谢谢。 :)

标签： javascript html onclick

【解决方案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);

&lt;div id='myDiv'&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

如果您在创建功能中添加点击按钮，它将起作用

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

【讨论】：