如何用HTML按钮实现JavaScript按住解锁、松开锁定门的需求？

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>

<h1>Control Door Lock</h1>
<p><input type="button" id="light" value="锁定"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script>
var socket = io();
window.addEventListener("load", function(){
  var lockBtn = document.getElementById("light");
  
  // 按住按钮：发送解锁指令（1）
  lockBtn.addEventListener("mousedown", function() {
    socket.emit("light", 1);
    this.value = "解锁中";
  });
  
  // 松开按钮：发送锁定指令（0）
  lockBtn.addEventListener("mouseup", function() {
    socket.emit("light", 0);
    this.value = "锁定";
  });
  
  // 鼠标移出按钮区域：同样触发锁定
  lockBtn.addEventListener("mouseleave", function() {
    socket.emit("light", 0);
    this.value = "锁定";
  });
});

// 接收来自树莓派的状态更新
socket.on('light', function (data) {
  var lockBtn = document.getElementById("light");
  // 根据状态更新按钮文本
  lockBtn.value = data === 1 ? "解锁中" : "锁定";
  // 同步状态到服务器
  socket.emit("light", data);
});
</script>

</body>
</html>

关键改动说明 #

• 控件替换：把原Checkbox替换为按钮，初始文本设为“锁定”，匹配默认锁定状态。
• 事件逻辑调整：
  • mousedown：按住鼠标时发送解锁信号（1），同时更新按钮文本提示当前状态。
  • mouseup：松开鼠标时发送锁定信号（0），恢复按钮初始文本。
  • mouseleave：补充该事件，避免用户按住鼠标后移出按钮区域，导致无法触发锁定操作。
• 状态同步优化：接收树莓派传来的状态时，不再操作checked属性，改为通过按钮文本直观展示当前锁定/解锁状态。

内容的提问来源于stack exchange，提问作者hahobson