ESP8266电机控制按钮适配移动端触摸功能求助

嗨，我完全懂你的困扰！桌面端依赖的mousedown/mouseup鼠标事件，在移动端触摸设备上根本不生效——手机认的是touchstart/touchend这类触摸事件。咱们只需要给按钮补上触摸事件的处理逻辑，就能让它同时兼容桌面和移动端啦。

快速修改方案（内联事件方式） #

直接在你的按钮标签里添加触摸事件属性，同时阻止浏览器的默认触摸行为（避免页面滚动、长按菜单这类操作干扰按钮响应）：

<input 
  type="button" 
  onmousedown="Horario()" 
  onmouseup="Stop()" 
  ontouchstart="Horario(); event.preventDefault();" 
  ontouchend="Stop(); event.preventDefault();" 
  value="horario" 
  class="event"
>

关键细节说明： #

• ontouchstart：手指触摸按钮时触发，对应桌面端的mousedown，调用Horario()启动电机
• ontouchend：手指离开按钮时触发，对应桌面端的mouseup，调用Stop()停止电机
• event.preventDefault()：阻止移动端触摸时的默认浏览器行为，确保你的按钮事件能稳定触发

更优雅的维护方案（事件监听） #

如果觉得内联事件不够整洁，也可以用JavaScript事件监听来统一绑定所有事件，把逻辑和HTML结构分离，后期修改更方便：
先简化你的HTML，去掉内联事件：

<input type="button" value="horario" class="event">

然后添加JavaScript代码：

// 获取按钮元素
const motorButton = document.querySelector('.event');

// 绑定桌面端鼠标事件
motorButton.addEventListener('mousedown', Horario);
motorButton.addEventListener('mouseup', Stop);

// 绑定移动端触摸事件
motorButton.addEventListener('touchstart', function(e) {
  Horario();
  e.preventDefault(); // 阻止默认触摸行为
});

motorButton.addEventListener('touchend', function(e) {
  Stop();
  e.preventDefault();
});

试一下这两种方案，应该就能解决移动端无法控制电机的问题啦！

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