Javascript - 이벤트 리스너 토글 버튼

Question

"두 번 클릭"을 "한 번 클릭"으로 또는 그 반대로 전환 할 수있는 버튼을 만들려고합니다. 어떤 이유로 클릭 한 번으로 전환하면 되돌릴 수 없습니다. 아무도 도와 줄 수 있습니까?

function init() { 
    normal_listeners(); 
} 

function addListener(){ 
    var image1 = document.getElementById('image_1'); 
    var image2 = document.getElementById('image_2'); 
    var image3 = document.getElementById('image_3'); 

    if(document.getElementById('listener_1').value == "Listener"){ 
     document.getElementById('listener_1').style.backgroundColor = "red"; 
     alert("Normal"); 

     image1.addEventListener("dblclick", function(){userChoice(1);}, false); 
     image2.addEventListener("dblclick", function(){userChoice(2);}, false); 
     image3.addEventListener("dblclick", function(){userChoice(3);}, false); 

     document.getElementById('listener_1').value = "Normal"; 
    } 
    else if(document.getElementById('listener_1').value == "Normal") { 
     document.getElementById('listener_1').style.backgroundColor = "green"; 
     alert("Listener"); 

     image1.addEventListener("click", function(){userChoice(1);}, false); 
     image2.addEventListener("click", function(){userChoice(2);}, false); 
     image3.addEventListener("click", function(){userChoice(3);}, false); 

     document.getElementById('listener_1').value = "Listener"; 
    } 
} 

function normal_listeners(){ 
    var image1 = document.getElementById('image_1'); 
    var image2 = document.getElementById('image_2'); 
    var image3 = document.getElementById('image_3'); 
    var listener1 = document.getElementById('listener_1'); 

    listener1.addEventListener("click", addListener, false);  
    image1.addEventListener("dblclick", function(){userChoice(1);}, false); 
    image2.addEventListener("dblclick", function(){userChoice(2);}, false); 
    image3.addEventListener("dblclick", function(){userChoice(3);}, false); 
} 
window.onload = init; 

<img id="image_1" src="rock.jpg" alt="ROCK" width="100" height="100"> 
<img id="image_2" src="paper.jpg" alt="PAPER" width="100" height="100"> 
<img id="image_3" src="scissors.jpg" alt="SCISSORS" width="100" height="100"> 
<input type="button" id="listener_1" value="Normal" style="background-color:red"> 

Answer 1

새 이벤트를 추가하기 전에 이벤트 수신기를 제거해야한다고 생각합니다. 할당 된 클릭 청취자가 더블 클릭 청취자가 발생하는 것을 방지 할 수 있습니다.