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

祝你好运！

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

1 个答案: