觸發功能時點擊按鈕，通過socket.io

我有以下節點服務器和index.html文件，當我在多個選項卡或瀏覽器窗口中打開index.html文件，當我點擊按鈕，它顯示按鈕在所有打開的選項卡和窗口中單擊，但按鈕顏色不會在所有選項卡中更改，而只會在單擊該按鈕的選項卡中更改。觸發功能時點擊按鈕，通過socket.io

app.js

的index.html

<!doctype html> 
    <html> 
    <head> 
     <title>Testing socket.io</title> 
     </head> 
    <body> 
     <input type="button" id="button" style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #16ed07; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" value="Send!" onClick="onClickHandler(this)"/> 
     <h2 id="alert"> waiting...</h2> 


     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script> 
     <script> 
     var socket = io("http://localhost:3000"); 
     socket.on('connect', function() { 
      document.getElementById("button").addEventListener("click", function() { 
       socket.emit("clicked"); 
      }); 

     }); 
     socket.on('clicked', function() { 
      console.log('clicked'); 
      document.getElementById("alert").innerHTML = "send clicked"; 
     }); 




     </script> 

     <script type="text/javascript"> 
function onClickHandler(elem) { 
elem.style.background = 'red'; 
elem.style.color = 'black'; 
} 
</script> 

    </body> 
    </html>

來源

2017-03-31 vamshi

'io.sockets.emit （「點擊」）;' – Rayon

添加「onClickHandler」來電「點擊」事件回調，如：

socket.on('clicked', function() { 
    var button = document.getElementById('button'); 

    console.log('clicked'); 
    document.getElementById("alert").innerHTML = "send clicked"; 

    onClickHandler(button); 
});

來源

2017-03-31 13:26:55

我可以讓按鍵通過自己的價值，而不是ID – vamshi

@vamshi你可以嘗試像點擊：'document.querySelect orAll（「按鈕[值=‘發送！’]」）;' –

在我的情況下，我得到從另一個網頁表單按鈕值，這樣按鈕值在一個頁面不同形式的一個標籤到另一個，將有多個按鈕，我仍然可以使用你的建議嗎？ – vamshi

觸發功能時點擊按鈕，通過socket.io

回答

相關問題