Electron PC客户端（Windows+Linux）强制启用触摸模式的方法

Electron打包成客户端，部署在安装了Ubuntu系统的触摸一体机上。

由于该触摸一体机的触摸屏在Ubuntu里没有被识别成触摸设备（也可能是驱动设置不对？），在Ubuntu操作系统上的表现如同鼠标一样。

比如触摸有鼠标箭头出现，触摸网页元素触发的是click事件，触摸拖动网页的效果不是让网页上下滚动，而是触发了长按鼠标左键并拖动的效果，结果就选中了文本。

简而言之，就是触摸屏在系统中表现得像个鼠标，无法像手机或者平板一样，通过触摸或手势去控制网页滚动缩放。

同样的，部署在Ubuntu系统上的Electron客户端，使用的是Webkit内核同样也是无法识别触摸屏的触摸和手势。

后续，我又尝试了多种方法：

一、使用chrome的命令行来启用触摸事件或强制指定触摸设置，然后--touch-events/--touch-devices等在Electron中没有效果。

二、使用Any-Touch这个JS库来让鼠标有手势等，可行，但治标不治本，需要对所有页面进行适配。

any-touch：GitHub - any86/any-touch: :wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile - GitHub - any86/any-touch: :wave: Touch gesture library, 1kb~5kb, compatible with PC / mobilehttps://github.com/any86/any-touch

最后，在尝试了多种方法无效或不理想后，在stackoverflow中找到了解决方案，废话不多说，直接帖代码：

const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    autoHideMenuBar: true,
  })

  // 主要就是以下三段，本质上就是启动debugger，强制进入移动端模式，然后让鼠标事件也能触发touch事件，而且界面也不会显示控制台
  mainWindow.webContents.debugger.attach('1.3')
  mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
    enabled: true,
    configuration: 'mobile',
  })
  mainWindow.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true })

  // 省略
  ...
}

app.on('ready', createWindow)

参考引用：

Can electron webview transform mouse event to touch event? - Stack Overflowhttps://stackoverflow.com/questions/46295772/can-electron-webview-transform-mouse-event-to-touch-event