與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

祝你好運！