Question

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

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

我正在尝试使用socket.io在所有窗口上点击任何窗口时对所有窗口进行着色，然后再次点击它会将其颜色更改回各处等等。

但它只在第一次使用时才会使颜色变为蓝色，但再次点击时再也不会变回白色。

这是服务器代码：

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

许多浏览器将样式属性中的颜色十六进制值设置为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);
}

为什么socket.io不适用于点击事件？

1 个答案: