移动端,触摸屏模式下,node:click事件不生效 #5652
SmartGreenOrange posted onGitHub
问题描述
移动端,触摸屏模式下,node:click事件不生效,只生效node:touchxxx事件
重现链接
任意图谱,切换成触摸模式即可触发
重现步骤
chrome调试中选择移动端设备,例如iphoneSE,在绑定了node:click事件的节点点击,在on('click',()=>{})事件中没有触发
预期行为
期望click事件能原生支持移动端 现在只能采取挺后门的做法:添加了自定义Behaviour,监听touchstart和touchend,通过计算start到end的时间和位移的距离来判断用户是否是点击操作
平台
- 操作系统: [Windows]
- 网页浏览器: [Google Chrome]
- G6 版本: [4.8.20]
屏幕截图或视频(可选)
No response
补充说明(可选)
const registerTouchClick = graph => { G6.registerBehavior('touch-to-click', { getDefaultCfg() { return { startTime: 0, startX: 0, startY: 0 }; }, getEvents() { return { 'node:touchstart': 'onTouchStart', 'node:touchend': 'onTouchEnd' }; }, onTouchStart(e) { const { canvasX, canvasY } = e; this.startX = canvasX; this.startY = canvasY; this.startTime = new Date().getTime(); }, onTouchEnd(e) { const { canvasX, canvasY } = e; const timeDiff = new Date().getTime() - this.startTime; const distance = Math.sqrt(Math.pow(canvasX - this.startX, 2) + Math.pow(canvasY - this.startY, 2)); if (timeDiff < 500 && distance < 10) { graph.emit('touch-click', e); } } }); graph.addBehaviors('touch-to-click', 'default'); };