Javascript - 事件監聽器切換按鈕

我試圖創建一個可以切換「雙擊」到「單擊」的按鈕，反之亦然。出於某種原因，一旦切換到單擊，它將無法切換回來。任何人都可以幫忙嗎？Javascript - 事件監聽器切換按鈕

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">

來源

2013-07-03 user2546157

它看起來像按鈕切換你總是綁定事件，但不要解除以前。 – Tommi

對這段代碼要小心，如果你對同一個對象上的同一個事件有不止一個監聽器，效果可能會......好奇！ – guy777

我認爲你必須在添加新事件之前刪除事件監聽器。分配的點擊監聽器可能會阻止雙擊監聽器發生。

來源

2013-07-03 11:04:34 xmashallax

Javascript - 事件監聽器切換按鈕

回答

相關問題