为什么socket.io不能很好地处理点击事件？

我有一个非常简单的HTML代码，只是有

<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); 

Answer 1

许多浏览器将样式属性中的颜色的hex值设置为rgb值。 比较html元素的style属性中css规则的string值是有风险的。 相反，您应该将颜色值存储在另一个variables中，而不是引用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); }