爲什麼socket.io不能很好地處理點擊事件？

我有一個非常簡單的HTML代碼，只需爲什麼socket.io不能很好地處理點擊事件？

<div id="colorMe"> Change Me </div>

我試圖用socket.io任何窗口上單擊，然後當以色上的所有窗口這個div點擊後它再次改變其顏色回到無處不在等等。

但它只能在第一次使用，並且使得顏色隨處可見，但再次點擊時不會回到白色。

這是服務器代碼：

io.on('connection', function(socket){ 

    socket.on('changeColor', function(data){ 
    io.emit('currentColor',data); 
    }); 

});

這是在HTML頁面的JavaScript部分：

var socket = io(); 

let div = document.querySelector('#colorMe'); 

socket.on('currentColor',(currentColor)=>{ 
    div.style.background = currentColor; 
}); 


function changeColor(){ 
    let color = (div.style.background == 'blue')? 'white' : 'blue'; 
    socket.emit('changeColor', color); 
} 

div.addEventListener('click', changeColor);

來源

2017-05-19 You Ma

嘗試在你的'changeColor'函數中放置一個斷點，以查看'currentColor'處理函數中'color'和另一個斷點的值是否爲'currentColor'。 –

@WillReese我做到了，它總是藍色 –

'div.style.background'的價值是什麼？ –

許多瀏覽器的樣式設置顏色的十六進制值屬性爲RGB值。比較html元素的style屬性中css規則的字符串值是有風險的。相反，您應該將顏色值存儲在另一個變量中，而不是引用DOM來獲取該信息。

let div = document.querySelector('#colorMe'); 
let myColor = ""; 

socket.on('currentColor',(currentColor)=>{ 
    myColor = currentColor; 
    div.style.background = currentColor; 
}); 


function changeColor(){ 
    let color = (myColor == '#336699') ? '#ffffff' : '#336699'; 
    socket.emit('changeColor', color); 
}

來源

2017-05-19 01:04:29

爲什麼socket.io不能很好地處理點擊事件？

回答

相關問題