带触摸的PC一体机上ScrollView失效, 鼠标Move无法响应

  • Creator 版本: 3.4.2 web-mobile
  • 目标平台: Chrome, 360浏览器, IE
  • 重现方式:触摸一体机, 学校,幼儿园大量使用
  • 重现概率: 必现, 在WinXP,Win7,Win10都出现

PC浏览器鼠标正常, IOS和安卓手机触摸屏正常, 但在有触控的一体机上无法监听到鼠标Move事件.

方法1:失败
修改了框架 engine\cocos\core\platform\sys.ts

capabilities: {
    canvas: true,
    opengl: true,
    webp: systemInfo.hasFeature(Feature.WEBP),
    imageBitmap: systemInfo.hasFeature(Feature.IMAGE_BITMAP),
    // touches: systemInfo.hasFeature(Feature.INPUT_TOUCH),
    touches: true,
    mouse: systemInfo.hasFeature(Feature.EVENT_MOUSE),
    keyboard: systemInfo.hasFeature(Feature.EVENT_KEYBOARD),
    accelerometer: systemInfo.hasFeature(Feature.EVENT_ACCELEROMETER),
}

进行编译打版后, 也无法正常使用

方法2:无法面向市场
使用触摸屏设置软件 InfraRedTouch 可以改为单点模式会正常, 但几乎所有的一体机出厂都是触控模式, 所以无法挨个去客户那里进行设置

拖动
QQ截图20220402121526

1赞

engine\pal\system-info\web\system-info.ts
因为这里的 supportTouch 为 false 所以没有启动触摸

/**
* supportTouch 为 true 才可以执行下面代码
* 1. engine\pal\input\web\touch-input.ts
* constructor()→才去获取HTMLCanvasElement
* 2. engine\cocos\input\input.ts
* constructor()→_registerEvent() 才能监听触摸
*/
const supportTouch = (document.documentElement.ontouchstart !== undefined || document.ontouchstart !== undefined);
this._featureMap = {
[Feature.INPUT_TOUCH]: supportTouch,
};

最粗暴的做法修改发布模板 index.ejs, 这样就不需要修改引擎

<script>
// Cocos 解决触摸屏问题
if (document.documentElement.ontouchstart === undefined) document.documentElement.ontouchstart = null
</script>
5赞

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。