javascript - 与 setInterval 结合使用时，img 的 onclick 属性出现问题

Question

我正在尝试制作在屏幕上移动的图像，当它们被点击时会执行某些操作。我正在使用 setInterval 调用一个函数来移动图像。每个图像都有 onclick 属性集。问题是点击没有注册。

如果我取消 setInterval 并保持图像静止，则点击会记录下来。

我的代码在这里(html、css、JavaScript):https://jsfiddle.net/contini/nLc404x7/4/

JavaScript 复制在这里:

var smiley_screen_params = {
  smiley_size : 100,  // needs to agree with width/height from css file
  num_smilies: 20
}

var smiley = {
  top_position : 0,
  left_position : 0,
  jump_speed : 2,
  h_direction : 1,
  v_direction : 1,
  intvl_speed : 10,    // advance smiley every x milliseconds
  id : "smiley"
}

function randomise_direction(s) {
  var hd = parseInt(Math.random()*2);
  var vd = parseInt(Math.random()*2);
  if (hd === 0)
    s.h_direction = -1;
  if (vd === 0)
    s.v_direction = -1;
}

function plotSmiley(sp /* sp = smiley params */) {
  var existing_smiley = document.getElementById(sp.id);
  if (existing_smiley !== null)
    // delete existing smiley so we can move it
    document.getElementById("smileybox").removeChild(existing_smiley);
  var smiley_to_plot = document.createElement('img');
  smiley_to_plot.setAttribute('src', "http://i.imgur.com/C0BiXJx.png");
  smiley_to_plot.setAttribute('id', sp.id);
  smiley_to_plot.setAttribute('onclick', "my_click_count()");
  smiley_to_plot.style.position = 'absolute';
  smiley_to_plot.style.top = sp.top_position + "px";
  smiley_to_plot.style.left = sp.left_position + "px";
  document.getElementById("smileybox").appendChild(smiley_to_plot);
}

function random_direction_change() {
  var r = parseInt(Math.random()*200);
  if (r===0)
    return true;
  else
    return false;
}

function moveFace(sp_array /* sp_array = smiley params array */) {
  var i;
  var sp;

  for (i=0; i < sp_array.length; ++i) {
    // move ith element
    sp = sp_array[i];
    if (
      (sp.h_direction > 0 && sp.left_position >= smiley_screen_params.width - smiley_screen_params.smiley_size) ||
      (sp.h_direction < 0 && sp.left_position <= 0) ||
      (random_direction_change())
    ) {
      sp.h_direction = -sp.h_direction;  // hit left/right, bounce off (or random direction change)
    }
    if (
      (sp.v_direction > 0 && sp.top_position >= smiley_screen_params.height - smiley_screen_params.smiley_size) ||
      (sp.v_direction < 0 && sp.top_position <= 0) ||
      (random_direction_change())
    ) {
      sp.v_direction = -sp.v_direction;  // hit top/bottom, bounce off (or random direction change)
    }

    sp.top_position += sp.v_direction * sp.jump_speed;
    sp.left_position += sp.h_direction * sp.jump_speed;
    plotSmiley(sp);
  }
}

if (typeof Object.create !== 'function') {
    Object.create = function(o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

function generateFaces() {
  var smilies = new Array();
  var s;
  var i;
  var css_smileybox=document.getElementById("smileybox");
  var sb_style = getComputedStyle(css_smileybox, null);

  // add info to the screen params
  smiley_screen_params.width = parseInt(sb_style.width);
  smiley_screen_params.height = parseInt(sb_style.height);

  // create the smileys
  for (i=0; i < smiley_screen_params.num_smilies; ++i) {
    s = Object.create(smiley);
    s.id = "smiley" + i;
    s.top_position = parseInt(Math.random() * (smiley_screen_params.height - smiley_screen_params.smiley_size)),
    s.left_position = parseInt(Math.random() * (smiley_screen_params.width - smiley_screen_params.smiley_size)),
    randomise_direction(s);
    smilies.push(s);
  }
  setInterval( function(){ moveFace(smilies) }, smiley.intvl_speed );
}

var click_count=0;
function my_click_count() {
  ++click_count;
  document.getElementById("mg").innerHTML = "Number of clicks: " + click_count;
}

generateFaces();

generateFaces() 将为一堆笑脸图像生成参数(例如，放置位置的坐标)。 setInterval在该函数内，调用moveFace函数使笑脸以固定的时间间隔移动。 moveFace 计算每个笑脸图像的新坐标，然后调用 plotSmiley 将每个笑脸图像绘制在屏幕上的新位置(将其从旧位置移除)。 plotSmiley 设置每个图像的 onclick 属性以调用一个虚拟函数来查看点击是否被记录。

提前致谢。

Answer 1

这不是一个完整的答案，但它可以为您提供改进代码的一些观点。

首先，你删除现有img的想法​​就错了。如果它确实存在，你所需要的只是改变它的位置，而不是这个

if (existing_smiley !== null)
  // delete existing smiley so we can move it
  document.getElementById("smileybox").removeChild(existing_smiley);

你应该这样做:

if (existing_smiley !== null)
  var smiley_to_plot = existing_smiley;
else {
  var smiley_to_plot = document.createElement('img');
  smiley_to_plot.setAttribute('src', "http://i.imgur.com/C0BiXJx.png");
  smiley_to_plot.setAttribute('id', sp.id);
  smiley_to_plot.style.position = 'absolute';
  document.getElementById("smileybox").appendChild(smiley_to_plot);
  smiley_to_plot.addEventListener('click', my_click_count);
}
smiley_to_plot.style.top = sp.top_position + "px";
smiley_to_plot.style.left = sp.left_position + "px";

如您所见，只有在新图像不存在时才会添加新图像。另请注意，使用 .setAttribute('onclick', "my_click_count()"); 添加事件并不是一个好方法。您应该像我一样使用 .addEventListener('click', my_click_count);。

就像我说的，这不是一个完整的答案，但至少他们现在以这种方式响应点击事件。

FIDDLE UPDATE

祝你好运!