イベントハンドラの匿名関数はスタイリングを有効にしません

Question

ここではスタックオーバーフローで見つかったイベントリスナーを使用する方法を試しています。

私自身の問題は、いくつかの要素（id名のテストによって取得）の要素IDを取得し、これらの要素だけのスタイリング/変更を分離しようとしていることです。それらの上に）。

イベントが発生する可能性のある要素がわからないため、最大の問題は、リスナーに渡す要素のIDを収集して渡すことでした。私は、配列とif elseステートメントを使ってこれを克服する方法を見つけたと信じています。次に、新しい問題が見つかりました...

この例では、選択肢AまたはBに絞って問題を絞りました。選択肢Aはスタイリングで要素を変更する必要があり、選択肢Bは変更しません。この例では、IDを収集してリスニング関数に渡すことができましたが、何らかの理由でリスナーの匿名関数がリスニング関数に正常に渡されたにもかかわらず選択肢Aを変更することができません。理由を調べるために援助を求めています。 idをリスナーに明示的にハードコードすると、プログラムは動作します！

誰でも助けることができれば幸いです。

function listen(elem, evnt, func) { 
 
    if (elem.addEventListener) { //W3C DOMS. 
 
    elem.addEventListener(evnt, func, false); 
 
    } else if (elem.attachEvent) { //IE DOM 7 
 
    var r = elem.attachEvent("on" + evnt, func); 
 
    return r; 
 
    } 
 
} 
 

 
function attachListeners() { 
 

 
    var selectors = document.querySelectorAll("div"); 
 

 
    for (var i = 0; i < selectors.length; i++) { 
 
    selectors[i].addEventListener("focus", function(event) { 
 
     var id_of_clicked_element = event.target.id 
 
    }); 
 

 
    // var id_of_clicked_element = document.activeElement.id; 
 
    if (id_of_clicked_element = 'touch_me') { 
 
     var touch_div = id_of_clicked_element; 
 
    } else if (id_of_clicked_element = 'What_about_me') { 
 
     touch_div = id_of_clicked_element; 
 
    } 
 
    } 
 

 

 
    //var touch_div = document.getElementById('touch_me'); 
 
    // If you uncomment the line above and comment out the bit 
 
    // above the program works 
 

 

 
    listen(touch_div, 'touchmove', function(event) { 
 
    touch_div.innerHTML = "Being Touched" + event.targetTouches.length; 
 
    touch_div.style.background = 'green'; 
 
    }, false); 
 

 
    listen(touch_div, 'touchstart', function(event) { 
 
    event.preventDefault(); 
 
    touch_div.innerHTML = "touchstart"; 
 
    touch_div.style.background = 'green'; 
 
    }, false); 
 

 
    listen(touch_div, 'touchend', function(event) { 
 
    touch_div.innerHTML = "Thanks"; 
 
    touch_div.style.background = '#CCFF66'; 
 
    }, false); 
 

 
    listen(touch_div, 'click', function(event) { 
 
    touch_div.innerHTML = "Hey - touch not Click!"; 
 
    touch_div.style.background = 'red'; 
 
    }, false); 
 

 
    listen(touch_div, 'onmouseup', function(event) { 
 
    touch_div.innerHTML = "Hey - that was a Click!"; 
 
    touch_div.style.background = ''; 
 
    }, false); 
 
} 
 

 
window.onload = attachListeners;

<div id="touch_me"> Touch Me!</div> 
 
<div id="What_about_me"> What About Me!</div>

Answer 1

問題は、あなただけの要素ではない全体要素のIDを取得しているあなたのif文です。

if (id_of_clicked_element === 'touch_me') { 
     var touch_div = document.getElementById(id_of_clicked_element); 
    } else if (id_of_clicked_element === 'What_about_me') { 
     touch_div = document.getElementById(id_of_clicked_element); 
    }